javascript Ext.define() में initComponent() से संबंधित सर्वोत्तम अभ्यास




extjs extjs4 (3)

मैं लियोनेल के जवाब में जोड़ना चाहता हूं कि initComponent में किसी भी गैर-आदिम कॉन्फ़िगरेशन को घोषित करना बेहतर है। (आदिम से मेरा मतलब स्ट्रिंग, बुलियन और संख्या है)। ऐरे और ऑब्जेक्ट initComponent में initComponent
तो परिभाषा इस तरह दिखनी चाहिए:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  // here all primitive configs:
  cls: 'x-my-cls',
  collapsible: true,
  region: 'west',
  // and so on ...

  initComponent: function() {
    // here you declare non-primitive configs:
    this.tbar = [/* blah-blah */];
    this.columns = [/* blah-blah */];
    this.viewConfig = {/* blah-blah */};
    // and so on ...

    this.callParent(arguments);
  }

  // other stuff
}

इन सभी गैर-आदिम विन्यासों को initComponent में क्यों डालना चाहिए इसका कारण यह है कि अन्य सभी मामलों के कॉन्फ़िगरेशन एक ही ऑब्जेक्ट को संदर्भित करेंगे। उदाहरण के लिए यदि आप न्यू क्लास को परिभाषित करते हैं जैसे:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  bbar: Ext.create('Ext.toolbar.Toolbar', {
  // ...

सभी मामलों के bbar एस एक ही वस्तु का संदर्भ लेंगे। और इसलिए हर बार जब आप नया उदाहरण बनाते हैं तो बीबार पूर्ववर्ती उदाहरण से गायब हो जाता है।

मैं Ext.define() का उपयोग कर ExtJS के नए एमवीसी फैशन में अपने सभी घटकों को लिख रहा हूं।

मैं थोड़ा सा संघर्ष करता हूं कि initComponent() अंदर गुणों को परिभाषित करता है या बस उन्हें property: 42, तरह सेट करके property: 42, ,।

क्या व्यापक रूप से सर्वोत्तम प्रथाओं को स्वीकार किया जाता है?

मैं केवल आवश्यक होने पर initComponent() का उपयोग करने के बीच चौंकाने वाला हूं (यानी जब मैं कुछ गतिशील या स्कोप सेट करता हूं) जो फ़ंक्शन को छोटा रखता है और मुझे कुछ बदसूरत बनाता है this. एस और हमेशा इसका उपयोग करते हुए लाभ होता है, कि मुझे कभी भी पूर्व गुणों को initComponent() स्थानांतरित नहीं करना initComponent() क्योंकि मैं इसे अधिक गतिशील बनाना चाहता हूं।

दुर्भाग्यवश, सेन्चा के दस्तावेज़ इस बारे में ज्यादा कुछ नहीं बताते हैं और उपलब्ध उदाहरण ऐसा लगता है जैसा वे चाहते हैं।


व्यक्तिगत अभ्यास, जब मैं गुण क्षेत्र में चर घोषित करता हूं

  • x , y , width , height जैसे परिमाण परिभाषित चर
  • वेरिएबल्स जो ओवरराइड होने की प्रतीक्षा कर रहे हैं, या अनुकूलन योग्य, जैसे title , saveBtnTxt , url , fields , iconCls
  • कुछ स्थिरांक, जिनमें विशेष उपसर्ग होंगे, इसलिए इतनी आसानी से ओवरराइड नहीं किया जाएगा

तब मैं items , listeners , this.on , Ext.apply(me, {..}) घोषित Ext.apply(me, {..}) या कुछ भी जिसके लिए initComponent ( this , me ) के दायरे की आवश्यकता है, मेरे initComponent अंदर बैठने के लिए। या सामान जो कुछ भी स्थापित करने से पहले संशोधित / ओवरराइड किया जाना चाहिए, इसलिए उपयोगकर्ता कुछ महत्वपूर्ण चरों को ओवरराइड करके मेरे घटक को तोड़ नहीं देगा।

बेशक यह मेरे मार्गदर्शन के रूप में काम करेगा। 2 सेंट

संपादित करें

बदसूरत के बारे में, मैंने अपने ऐप में व्यापक रूप से चर का उपयोग किया है, और यह इससे बहुत साफ दिखता है। यह मुझे कम से कम स्कॉप्स को बदलने से भी लाभान्वित करता है।


मुझे आपका प्रश्न बिल्कुल नहीं मिल रहा है लेकिन यह आपके लिए उपयोगी हो सकता है।

  Ext.define('My.Group', {
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : {
    title : 'Group' + i.toString(),
    id : '_group-' + i.toString()

},
constructor : function(config) {
    this.initConfig(config);

    return this;
},    
collapsible: true,
autoScroll:true,
.....
});

आप इसे अनुवर्ती के रूप में उपयोग कर सकते हैं।

handler : function() {                      
        i = i + 1;
        var group = new My.Group({
            title : 'Group' + i.toString(),
            id : '_group-' + i.toString()
        });
        // console.log(this);
        // console.log(group);
        Ext.getCmp('panelid').insert(i, group);
        Ext.getCmp('panelid').doLayout();
    }




extjs4