ExtJS4: Come passare argomenti a initComponent

Question

Sto usando Sencha Architect 2. Sto provando a generare un elemento UI generico con una ricerca testuale e una tabella che mostra i risultati. Generico voglio usarlo per diversi tipi di ricerche, ad es. per utenti, ruoli o ancora qualcos'altro.

Quindi ciò che mi piace in questo contesto di Sencha Architect 2 è che genera sempre classi. Qui è la mia classe generata:

Ext.define('ktecapp.view.ObjSearchPanel', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.objsearchpanel', 

    height: 250, 
    id: 'UserSearchPanel', 
    itemId: 'UserSearchPanel', 
    width: 438, 
    layout: { 
     columns: 3, 
     type: 'table' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'textfield', 
        itemId: 'txtSearchText', 
        fieldLabel: 'Search Text', 
        colspan: 2 
       }, 
       { 
        xtype: 'button', 
        id: 'searchObj', 
        itemId: 'searchObj', 
        text: 'Search', 
        colspan: 1 
       }, 
       { 
        xtype: 'gridpanel', 
        height: 209, 
        itemId: 'resultGrid', 
        width: 430, 
        store: 'UserDisplayStore', 
        colspan: 3, 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          width: 60, 
          dataIndex: 'ID', 
          text: 'ID' 
         }, 
         { 
          xtype: 'gridcolumn', 
          width: 186, 
          dataIndex: 'DISPLAYNAME', 
          text: 'Displayname' 
         }, 
         { 
          xtype: 'gridcolumn', 
          width: 123, 
          dataIndex: 'JOBTITLE', 
          text: 'Job Title' 
         }, 
         { 
          xtype: 'actioncolumn', 
          width: 35, 
          icon: 'icons/zoom.png', 
          items: [ 
           { 
            icon: 'icons/zoom.png', 
            tooltip: 'Tooltip' 
           } 
          ] 
         } 
        ], 
        viewConfig: { 

        }, 
        selModel: Ext.create('Ext.selection.CheckboxModel', { 

        }) 
       } 
      ] 
     }); 
     me.callParent(arguments); 
    } 
}); 

Il problema che sto avendo è che tutto deve essere abbastanza personalizzabile, dataIndexes delle colonne, il negozio, ... Così come posso avere un costruttore come la funzione per la classe ObjSearchPanel dove passo tutte queste informazioni? Nel codice di cui sopra tutto questo sembra più o meno hardcoded ...

Grazie in anticipo Kai

Answer 1

realtà (in ExtJS 4), quando si passare un oggetto config al costruttore, questo oggetto config è assegnato alla variabile this.initialConfig e ancora disponibile ad altre funzioni della classe. Quindi puoi usarlo nello initComponent.

È ancora possibile trovare il codice in ExtJS 3.3 come questo Ext.apply(this, Ext.apply(this.initialConfig, config)); nel initComponent di classi. Tuttavia, utilizzalo a tuo rischio perché questo non si trova nel documento di ExtJS 4, lo trova solo nel codice sorgente.

Answer 2

uso config,

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Class-cfg-config

Ext.define('SmartPhone', { 
    config: { 
     hasTouchScreen: false, 
     operatingSystem: 'Other', 
     price: 500 
    }, 
    constructor: function(cfg) { 
     this.initConfig(cfg); 
    } 
}); 

var iPhone = new SmartPhone({ 
    hasTouchScreen: true, 
    operatingSystem: 'iOS' 
}); 

iPhone.getPrice(); // 500; 
iPhone.getOperatingSystem(); // 'iOS' 
iPhone.getHasTouchScreen(); // true; 
iPhone.hasTouchScreen(); // true