ExtJS4: initComponent

Question

पर तर्क कैसे पारित करें I मैं सेन्चा आर्किटेक्ट 2 का उपयोग कर रहा हूं। मैं टेक्स्ट खोज के साथ एक सामान्य UI तत्व उत्पन्न करने और परिणामों को प्रदर्शित करने वाली तालिका उत्पन्न करने का प्रयास कर रहा हूं। जेनेरिक मतलब है कि मैं इसे कई अलग-अलग प्रकार की खोजों के लिए उपयोग करना चाहता हूं, उदा। उपयोगकर्ताओं, या भूमिकाओं या अभी भी कुछ और के लिए।

तो मुझे इस संदर्भ में सेन्चा आर्किटेक्ट 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, ... तो मैं कैसे के लिए समारोह की तरह एक निर्माता प्राप्त कर सकते हैं की जरूरत है कक्षा ObjSearchPanel जहां मैं वह सारी जानकारी पास करता हूं? यह सब उपरोक्त कोड में काफी hardcoded लग ...

अग्रिम धन्यवाद काई

Answer 1

वास्तव में, जब आप (ExtJS 4 में) कन्स्ट्रक्टर को कॉन्फ़िगर ऑब्जेक्ट पास करें, यह कॉन्फ़िगरेशन ऑब्जेक्ट this.initialConfig वैरिएबल को असाइन किया गया है और अभी भी कक्षा के अन्य कार्यों के लिए उपलब्ध है। तो आप इसे initComponent में उपयोग कर सकते हैं।

कक्षाओं के initComponent में आप अभी भी Ext.apply(this, Ext.apply(this.initialConfig, config)); जैसे ExtJS 3.3 में कोड पा सकते हैं। हालांकि, इसे अपने जोखिम पर उपयोग करें क्योंकि यह ExtJS 4 के दस्तावेज़ में नहीं है, केवल इसे स्रोत कोड में मिला है।

Answer 2

उपयोग 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