Question

How else could i access this class, i need my dynamic ID for something else… Normally if this was // var something = Ext.create(… i would do something.getForm().load…)???

Ext.define('app.winKontakt',{
    extend:'Ext.form.Panel',
    closable:true,
    id:"myId",    <------------------------------------------ID
    waitMsgTarget: true,
    border:false,
    defaults: {
    anchor: '30%',
    padding:10
    },
    reader : Ext.create('Ext.data.reader.Json', {
        model: 'app.contact',
        record : 'contact',
        successProperty: '@success'
    }),


    ...

    buttons: [{
        text: 'Load',
        handler: function(){

            winId = Ext.getCmp("myId");    <--------------GET

            winId.getForm().load({    <---------------EXECUTE
                url: 'app/new.json',
                waitMsg: 'Loading...',
                method:"GET"
            });
        }

     ...

Answer 1

I just started with ExtJS, so there may be a better practices.

You can assign an itemId to the component and use ComponentQuery to get it.

Ext.define('app.view.contact.Form', {
  extend: 'Ext.form.Panel',
  itemId: 'myId',

  buttons: [{
    text: 'Load',
    handler: function(){
      Ext.ComponentQuery.query('#myId').getForm().load({...});
    }
  }]
})

Another options is to use the up() function from AbstractComponent to get the enclosing form.

Ext.define('app.view.contact.Form', {
  extend: 'Ext.form.Panel',

  buttons: [{
    text: 'Load',
    handler: function(){
      this.up('form').load({...});
    }
  }]
})

I normally don’t put any code in the view definition, instead I use the control() function within a Ext.app.Controller to have proper MVC separation:

Ext.define('app.controller.Contacts', {
  extend: 'Ext.app.Controller',
  views: ['app.view.contact.Form'],

  init: function() {
    this.control({
      'button[action=load]': {
        click: this.loadForm
      }
    })
  }

  loadFrom: function() {...}
})

Ext.define('app.view.contact.Form', {
  extend: 'Ext.form.Panel',

  buttons: [{
    text: 'Load',
    action: 'load'
  }]
})

In this small example it looks quite like some overhead, but with a larger codebase the control function is quite handy to understand the events sent from a complex view to the controller.