extjs4 - घटकों से नहीं, DOM तत्वों के लिए ExtJS MVC नियंत्रक अटैचमेंट करें




extjs-mvc (5)

मैंने इस प्रश्न को सनकाकॉन में इस साल पूछा, सेचा डेवलपर्स ने कहा कि उनका इरादा है कि डोम श्रोताओं को आपके विचार में संलग्न किया जाना चाहिए और इस दृश्य को उन्हें अधिक सार्थक घटक घटनाओं में शामिल करना चाहिए और उन्हें ठीक करना चाहिए।

उदाहरण के लिए, मान लीजिए कि आप उपयोगकर्तागैले नाम से एक दृश्य बना रहे हैं जो लोगों के चेहरे की ग्रिड दिखाता है। आपके UserGallery दृश्य वर्ग के भीतर, आप इवेंट और लक्ष्य प्राप्त करने के लिए <img> टैग पर DOM क्लिक ईवेंट के लिए सुनेंगे, और फिर दृश्य एक "" उपयोगकर्ता चुनिंदा "नामक घटना को आग लगा सकता है और इसके बजाए क्लिक किए गए उपयोगकर्ता के लिए मॉडल इंस्टेंस को पास कर सकता है DOM लक्ष्य

अंत लक्ष्य यह है कि केवल आपके विचारों को इंटरफ़ेस इवेंट और डोम तत्वों जैसी चीजों के बारे में चिंतित होना चाहिए, जबकि एप्लिकेशन-स्तरीय नियंत्रक केवल सार्थक उपयोगकर्ता इरादों के साथ ही व्यवहार करता है आपके एप्लिकेशन और नियंत्रक कोड को आपके मार्कअप संरचना या इंटरफ़ेस कार्यान्वयन के साथ जोड़ा नहीं जाना चाहिए।

नमूना देखें

Ext.define('MyApp.view.UserGallery', {
    extend: 'Ext.Component'
    ,xtype: 'usergallery'

    ,tpl: '<tpl for="users"><img src="{avatar_src}" data-ID="{id}"></tpl>'

    ,initComponent: function() {
        this.addEvents('userselected');

        this.callParent(arguments);
    }

    ,afterRender: function() {
        this.mon(this.el, 'click', this.onUserClick, this, {delegate: 'img'});

        this.callParent(arguments);
    }

    ,onUserClick: function(ev, t) {
        ev.stopEvent();

        var userId = Ext.fly(t).getAttribute('data-ID');

        this.fireEvent('userselected', this, userId, ev);
    }
});

दृश्यों पर नोट्स

  • जब आप चाहें तो "Ext.Component" बढ़ाएं एक प्रबंधित <div> , Ext.Panel शीर्षकबार्स, टूलबार, ढेरिंग आदि जैसी चीज़ों का समर्थन करने के लिए बहुत भारी है।
  • "प्रबंधित" श्रोताओं का उपयोग करें जब एक घटक से DOM तत्वों के लिए श्रोताओं को संलग्न करते हैं (देखें घटक)। घटकों द्वारा प्रबंधित श्रोताओं को स्वचालित रूप से तब जारी किया जाएगा जब वह घटक नष्ट हो जाता है
  • जब एकाधिक DOM तत्वों से समान घटना को सुनना, "प्रतिनिधि" ईवेंट विकल्प का उपयोग करें और व्यक्तिगत तत्वों के बजाय उनके सामान्य अभिभावक को श्रोता को संलग्न करें। यह बेहतर प्रदर्शन करता है और आपको प्रत्येक बच्चे को लगातार श्रोताओं को जोड़ने / हटाने के बारे में चिंता किए बिना बाल तत्वों को बनाने / नष्ट करने देता है। जैसे कुछ का उपयोग करने से बचें .select('img').on('click', handler)
  • किसी दृश्य से एक घटना को फायर करने पर, सेन्चा का सम्मेलन यह है कि इस घटना का पहला पैरामीटर scope - इस दृश्य का एक संदर्भ जो घटना को निकाल दिया। यह सुविधाजनक है जब ईवेंट नियंत्रक से नियंत्रित किया जाता है, जहां आपको नियंत्रक होने के लिए ईवेंट हैंडलर के वास्तविक दायरे की आवश्यकता होगी।

नमूना नियंत्रक

Ext.define('app.controller.myController', {
    extend: 'Ext.app.Controller'

    ,init: function() {
        this.control({
            'usergallery': {
                userselected: function(galleryView, userId, ev) {
                    this.openUserProfile(userID);
                }
            }   
        });
    }

    ,openUserProfile: function(userId) {
        alert('load another view here');
    }
});

Ext.app.Controller नियंत्रण () विधि का उपयोग करने का कोई तरीका है, लेकिन एक DOM क्वेरी में पास करें? मेरे पास एक ऐसा पृष्ठ है जिसमें मानक लिंक होते हैं और उन्हें एक क्लिक हैंडलर जोड़ना चाहते हैं भले ही वे एक्सटेंशन बटन के रूप में नहीं बनाए गए थे

मैंने कोशिश की

Ext.define('app.controller.TabController', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log("init");
        this.control({
            'a': {
                click: this.changeTab
            }   
        });
    },

    changeTab: function() {
        alert("new tab!");
    }   
});

लेकिन लिंक्स पर क्लिक करने से अलर्ट नहीं होता है

क्या इस कंट्रोल के साथ एक सीएसएस चयनकर्ता निर्दिष्ट करने का एक तरीका है? या यह केवल घटकों के साथ काम करता है?


मेरे पास एक ऐसा हल भी है जो इस समस्या को हल करता है। मैं इस तकनीक का उपयोग करता हूं भले ही इस तरह के अन्य लाभ हैं: मैंने एक आवेदन व्यापक संदेश बस बनाया यह मेरे आवेदन में एक ऑब्जेक्ट है जो अवलोकन योग्य है, और कुछ इवेंट्स को परिभाषित करता है। फिर मैं अपने ऐप में किसी भी तरह से उन घटनाओं को ट्रिगर कर सकता हूं, जिनमें HTML लिंक शामिल हैं कोई भी घटक जो उन घटनाओं को सुनना चाहता है, उन्हें रिले कर सकता है और वे आग लगाएंगे जैसे कि उस घटक से निकाल दिया गया है।

Ext.define('Lib.MessageBus', {
    extend: 'Ext.util.Observable',

    constructor: function() {
        this.addEvents( 
                  "event1",
                  "event2"
                 );
        this.callParent(arguments);
    }
});

इसके बाद, प्रत्येक दूसरे compnent प्रारंभ करने के बाद यह जोड़ सकते हैं:

this.relayEvents('Lib.MessageBus', ['event1','event2']);

और फिर उन घटनाओं को सुनें। आप कुछ भी करके घटनाओं को ट्रिगर कर सकते हैं:

Lib.MessageBus.fireEvent('event1', 'param a', 'param b')

और आप ऐसा कर सकते हैं जिसमें HTML लिंक भी शामिल है

एप के एक भाग से दूसरे तक की घटनाओं को बंद करने के लिए बहुत आसान है


नहीं, यह संभव नहीं लगता है Ext.EventBus ExtJS घटकों द्वारा निकाल दिया गया घटनाओं को सुनता है आपके मानक DOM तत्व उन घटनाओं को आग नहीं करते हैं साथ ही क्वेरी की जांच एक्स्टजेएस componets (स्ट्रिंग चयनकर्ता) विधि के साथ की जाती है, जिसे डीओएम तत्वों द्वारा नहीं कहा जा सकता है। अगर कोई मुझे गलत कर सकता है तो कोई मुझे सुधार सकता है, लेकिन मुझे पूरा यकीन है कि यह संभव नहीं है, दुर्भाग्य से।


मैं हाल ही में एक ही समस्या थी (कुछ गैर घटक के साथ एमवीसी मिश्रण) बस सोचा था कि मैं इसे एक जवाब के रूप में फेंक दूँगा क्योंकि यह बहुत आसान लगता है और मेरे लिए काम करता है :)

Ext.define('app.controller.TabController', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log("init");
        this.control({
           /* 'a': {
                click: this.changeTab
            } */  
        });

    var link = Ext.dom.Query.selectNode('a');

    Ext.get(link).on('click', this.changeTab);

    },

    changeTab: function() {
        alert("new tab!");
    }   
});

यदि आपको एक्स्टजेस क्लास सिस्टम कैसे काम करता है, इसकी गहरी समझ नहीं है, तो आप इसका पालन करना चाहेंगे:

initComponent() में सभी गैर-आदिम प्रकारों को initComponent()

शब्दावली

  • आदिम प्रकार - तार, बूलियन, पूर्णांक, आदि
  • गैर-Primitives - सरणी और वस्तुओं।

व्याख्या

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

इस वजह से, कई लोगों ने मुद्दों का अनुभव किया जब एक विस्तारित घटक (आमतौर पर एक विस्तारित ग्रिड) एक से अधिक टैब पर बनाया जाता है।

इस व्यवहार को नीचे के जवाब में और इस स्कर्टल के डेन आलेख में समझाया गया है। आप यह SO प्रश्न भी पढ़ना चाहेंगे।