ExtJS 4 एमवीसी अनुप्रयोग

Question

में विस्तारक नियंत्रक एमवीसी संरचना के बाद मैं अपना एक्स्टजेएस 4 एप्लीकेशन बना रहा हूं। मैं कुछ कार्यक्षमता के साथ एक विस्तारित ग्रिड MyGrid बनाना चाहता हूं जिसे मैं कई बार पुन: उपयोग कर सकता हूं। इसलिए, मुझे लगता है, यह अपने स्वयं के नियंत्रक होना चाहिए जो भी बढ़ाया गया है, ताकि कार्यक्षमता विरासत में हो। यह ठीक से कैसे किया जाता है?

नीचे दिए गए कोड में मैं दिखाता हूं कि मैं MyExtendedGrid के साथ नियंत्रक MyGrid कैसे बढ़ाता हूं। मुझे एहसास है कि मैग्रिड नियंत्रक में init फ़ंक्शन को ओवरराइड कर रहा हूं, ताकि इसे कभी भी नहीं कहा जा सके। MyExtendedGrid init से MyGrid में "सुपर" init पर कॉल करके समस्या हल हो गई है, या नियंत्रण ऑब्जेक्ट्स को मर्ज करें? क्या यह एमवीसी भावना में ऐसा करने का सही तरीका है? यदि हां, तो कैसे?

नियंत्रक/MyGrid.js:

Ext.define('App.controller.MyGrid', { 
    extend: 'Ext.app.Controller', 
    refs: [ 
     { 
      ref: 'myGridView', 
      selector: 'mygrid' 
     } 
    ], 
    init: function() { 
     var me=this; 
     me.control({ 
      'mygrid textfield[name=searchField]': { 
       change: function() { 
        var view = me.getMyGridView(); 
        // Do something with view 
       } 
      } 
     }); 
    } 
}); 

नियंत्रक/MyExtendedGrid.js:

Ext.define('App.controller.MyExtendedGrid', { 
    extend: 'App.controller.MyGrid', 
    views: [ 
     'grids.MyExtendedGrid'], 
    refs: [ 
     { 
      ref: 'myExtendedGridView', 
      selector: 'myextendedgrid' 
     } 
    ], 
    init: function() { 
     var me=this; 
     me.control({ 
      'myextendedgrid': { 
       // Some control code 
       // Using getMyExtendedGridView() 
      } 
     }); 
    } 
}); 

देखें/ग्रिड/MyGrid.js:

Ext.define('App.view.grids.MyGrid', { 
    extend: 'Ext.grid.Panel', 
    alias : 'widget.mygrid', 
    requires: [ 
    ], 
    store: '', // Not defined here 
    columns: [ ], // Not defined here 

    initComponent: function() { 
     var me = this; 
     me.tbar = [ 
      'Search', 
      { 
       xtype: 'textfield', 
       name: 'searchField', 
       hideLabel: true, 
       width: 150 
      } 
     ]; 
     me.callParent(arguments); 
    } 
}); 

देखें/ग्रिड/MyExtendedGrid .js:

Ext.define('App.view.grids.MyExtendedGrid', { 
    extend: 'App.view.grids.MyGrid', 
    alias : 'widget.myextendedgrid', 
    store: 'MyStore', 
    columns: [ 
     // ... 
    ], 

    initComponent: function() { 
     var me = this; 
     me.bbar = [ 
      //... 
     ]; 
     me.callParent(arguments); 
    } 
}); 

Answer 1

ठीक है, कुछ सोचने के बाद मैंने निम्नलिखित समाधान पर फैसला किया, जिसका लाभ है कि mygrid को myextendedgrid के बारे में जानने की आवश्यकता नहीं है।

मैं प्रश्न में मेरे ग्रिडव्यू का विस्तार करता हूं।

मैंने बेस ग्रिड को सामान्य कार्यक्षमता के लिए अपना स्वयं का नियंत्रक दिया, उदाहरण के लिए deleteButton.setDisable(false) जब ग्रिड में कुछ चुना जाता है।

अगला, मैं खुद को याद दिलाता हूं कि refs:[ (उदाहरण के लिए selector: 'mygrid' के साथ) बेस क्लास के किसी भी विस्तारित उदाहरणों के लिए अस्पष्ट रूप से इंगित करेगा।जब me.control({ का उपयोग कर रहा बजाय up का उपयोग करके सक्रिय तत्व से traversing द्वारा प्रासंगिक ग्रिड मिलती है:

me.control({ 
    'mygrid textfield[name=searchField]': { 
     change: function(searchfield) { 
      var grid=searchfield.up('mygrid'); // (mygrid or myextendedgrid!) 
      // Do something with view 
     } 
    } 
... 

विस्तारित ग्रिड मैं अपने स्वयं के नियंत्रक देने के लिए और यहाँ मैं refs इस्तेमाल कर सकते हैं। मैं MyGrid क्लास से नियंत्रक का विस्तार नहीं करता (बल्कि 'Ext.app.Controller' से), जब तक कि मैं MyGrid नियंत्रक से फ़ंक्शंस या चर का उपयोग नहीं करना चाहता।

Ext.application({ 
    controllers: [ 
     'MyGrid' 
     'MyExtendedGrid', 
    ], 
... 

आदेश ग्रिड जब पंक्तियों ग्रिड में चुने गए हैं पाने के लिए, मैं नीचे के रूप में चयन मॉडल में ग्रिड संग्रहीत:: सभी नियंत्रकों का उपयोग कर app.js से शुरू कर रहे हैं

नियंत्रक में/MyGrid.js:

me.control({ 
    'mygrid': { 
     afterrender: function(grid) { 
      var selModel=grid.getSelectionModel(); 
      selModel.myGrid=grid; 
     }, 
     selectionchange: function(selModel, selected, eOpts) { 
      var grid=selModel.theLookupGrid; 
      // Do something with view 
     } 
... 

Answer 2

यह वास्तव में थोड़ा जटिल काम है ...

यहाँ हम अपने आवेदन में किया था (हम ठीक उसी स्थिति है - आधार नियंत्रक के कुछ प्रकार, यह है कि कई अलग अलग स्थानों में पुन: उपयोग किया जाता है) है

1. बेस नियंत्रक में init फ़ंक्शन रखें।

2. इस बेस नियंत्रक में सामान्य आधार विधि को परिभाषित करें (जैसे ग्रिड रेन्डर - जहां आपको हर समय सभी नियंत्रकों के लिए कुछ करने की आवश्यकता होती है)।

3. सभी बाल नियंत्रकों की घटनाओं की सदस्यता लें लेकिन आधार नियंत्रक के तरीकों का उपयोग करके घटनाओं की सदस्यता लें। यह अन्यथा काम नहीं करेगा - आधार नियंत्रक के पास घटनाओं के लिए सही ढंग से सदस्यता लेने के लिए उचित रेफरी नहीं है।

मैं कुछ स्रोत स्निपेट पोस्ट कर सकता हूं, लेकिन मुझे लगता है कि यह बहुत सरल है।