सेन्चा टच 2

Question

में Ext.define/Ext.extend मैं अभी सेन्चा टच 2 एमवीसी लेने शुरू कर रहा हूं। मेरे पास भारी एक्स अनुभव है, लेकिन यह एक पूरी तरह से नई दुनिया है।

मुझे एक दृश्य बनाने में बहुत दूर नहीं लग रहा है। मैंने इंटरनेट पर जो देखा है उसके आधार पर मैंने अपना कोड दो दिशाओं में लिया है, और न ही काम करता है।

पथ 1

मेरे app.js:

Ext.application({ 
     name: 'BkAdmin', 
     views: ['LoginForm'], 
     launch: function() { 
      Ext.create('BkAdmin.view.LoginForm'); 
    } 
}); 

मेरा विचार/LoginForm.js:

Ext.define('BkAdmin.view.LoginForm', { 
     extend: 'Ext.form.FormPanel', 
     config: { 
      fullscreen: true, 
      initComponent: function() { 
         alert('yo!'); 
         BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
      } 
     } 
    } 
); 

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

पथ 2

मेरे app.js:

Ext.application({ 
    name: 'BkAdmin', 
    views: ['LoginForm'], 
    launch: function() { 
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); 
    } 
}); 

मेरा विचार/LoginForm.js:

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { 
    fullscreen: true, 
    initComponent: function() { 
       alert('yo!'); 
     BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
    } 
}); 

यह खुले दिल से काम नहीं करता। क्रोम रिपोर्ट 'संपत्ति सेट नहीं कर सकता' लॉगिनफॉर्म 'अपरिभाषित' ... पृथ्वी पर कैसे देखा गया अपरिभाषित? इसके अलावा, यह कहता है 'निम्नलिखित वर्गों को घोषित नहीं किया जाता है भले ही उनकी फाइलें लोड की गई हों:' BkAdmin.view.LoginForm '।' निश्चित रूप से मुझे घोषित दिखता है।

यहां कई प्रश्न हैं: मैंने उपरोक्त पथों में क्या गलत किया? मैं पथ 1 में कॉल करने के लिए initComponent() कैसे प्राप्त कर सकता हूं, और पथ 2 को काम करने के लिए प्राप्त कर सकता हूं? कौन सा कोड उद्धरण-उपयोग करने के लिए बेहतर है?

धन्यवाद!

Answer 1

पथ 1 (लगभग) सही तरीका है। आपको नई कक्षा प्रणाली (एक्सटी जेएस 4 की तरह) की वजह से Ext.define का उपयोग करना चाहिए और Ext.extend (जो बहुत अच्छी तरह से/विश्वसनीय रूप से काम नहीं करता है) का उपयोग करना चाहिए।

config ब्लॉक केवल उस वर्ग के लिए कक्षा/दस्तावेज़ीकरण में परिभाषित विन्यास के लिए उपयोग किया जाता है। fullscreen, items, cls, style और इसी तरह की चीजें। config ब्लॉक में परिभाषित कुछ और जो नहीं है, एक कॉन्फ़िगरेशन instance.config में संग्रहीत किया जाएगा।

इसके बजाय, आप Ext.define में तरीकों आप मुख्य विन्यास वस्तु में ओवरराइड करना चाहते डाल दिया जाना चाहिए:

Ext.define('MyApp.view.MyView', { 
    extend: 'Ext.Component', 

    config: { 
     cls: 'custom-cls', 
     html: 'Some html' 
    }, 

    initComponent: function() { 
     // do something 
    } 
}); 

Sencha भी Sencha टच 2.0 में initComponent पदावनत कर दिया है। जब आपको कक्षा को तुरंत चालू करने की विधि की आवश्यकता होती है, तो आपको initialize विधि का उपयोग करना चाहिए। कृपया ध्यान दें, आदर्श रूप से आपको initialize के अंदर कॉन्फ़िगरेशन सेट नहीं करना चाहिए जबतक कि आप वास्तव में की आवश्यकता नहीं है। आपको हमेशा उन्हें config ब्लॉक के अंदर रखना चाहिए।

अंत में, आप का उपयोग करके विस्तारित वर्ग 'विधि कॉल कर सकते हैं:

this.callParent(arguments); 

Ext जे एस 3.x और Ext जे एस 4.x उपलब्ध here के बीच वर्ग प्रणाली में परिवर्तन पर एक गाइड है जो आपके लिए कुछ मदद हो सकती है। सेन्चा टच 2.x here के लिए एक अद्यतन क्लास सिस्टम गाइड भी है।