2012-05-02 66 views
5

我正在使用Sencha Architect 2.我試圖通過文本搜索和顯示結果的表生成一個通用UI元素。通用意味着我想將它用於幾種不同類型的搜索,例如,對於用戶或角色還是其他的東西。ExtJS4:如何將參數傳遞給initComponent

所以我在Sencha Architect 2這方面肯定很喜歡它,它總是生成類。這裏是我的生成類:

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); 
    } 
}); 

我遇到的問題是,一切都需要是相當定製,列,商店的dataIndexes,... 所以,我怎樣才能像功能的構造class ObjSearchPanel在哪裏傳遞所有這些信息?在上述這一切的代碼看起來非常硬編碼...

在此先感謝 凱

回答

4

其實(在ExtJS的4),當你傳遞一個配置對象給構造函數,這個配置對象被賦值爲this.initialConfig變量,並且該類的其他功能仍然可用。所以你可以在initComponent中使用它。

您仍然可以在ExtJS 3.3中找到類似Ext.apply(this, Ext.apply(this.initialConfig, config));initComponent類中的代碼。但是,使用它需要您自擔風險,因爲這不在ExtJS 4的文檔中,只能在源代碼中找到它。

+0

+1有意義:) – A1rPun

8

使用的配置,

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     
+0

您的回答很有幫助,但是,如果我只想提供不完整的信息而不是整個配置,則建議的方式無法使用。 – kaidentity

+0

+1爲我工作:) – 1Mayur