Extjs स्टोर

Question

का उपयोग कर गतिशील accordion बनाते हैं मैं extjs में एक ऐप के विकास शुरू कर रहा हूँ। मैं एमवीसी दृष्टिकोण का उपयोग कर रहा हूं, जैसा कि extjs documentation में प्रदान किया गया है।

मेरे पास कुछ गतिशील डेटा है जो उपयोगकर्ता को accordion नियंत्रण के सेट के साथ प्रस्तुत करने की आवश्यकता है। मुझे एक स्टोर में डेटा मिला है, लेकिन मुझे नहीं पता कि एडिशन आइटम को गतिशील रूप से कैसे बनाया जाए (ग्रिड पैनलों के विपरीत, स्टोर डेटा विधि नहीं दिखती है)।

यहाँ मेरे वर्तमान अकॉर्डियन दृश्य कोड है - स्थिर वस्तुओं के साथ:

Ext.define('BP.view.induction.LeftPage', { 
extend: 'Ext.Panel', 
alias : 'widget.leftpage', 

title: "Left Page", 
layout: { 
    type: 'accordion', 
    align: 'stretch' 
}, 
layoutConfig: { 
    // layout-specific configs go here 
    titleCollapse: true, 
    animate: true, 
    activeOnTop: true 
}, 
items: [{ 
    xtype: 'panel', // fake hidden panel, so all appear collapsed 
    hidden: true, 
    collapsed: false 
},{ 
    xtype: 'panel', 
    title: 'Panel 1', 
    html: 'Panel content!' 
},{ 
    xtype: 'panel', 
    title: 'Panel 2', 
    html: 'Panel content!' 
},{ 
    xtype: 'panel', 
    title: 'Panel 3', 
    html: 'Panel content!' 
}] 
}); 

कैसे प्राप्त करने के लिए ऊपर की सराहना की होगी पर कोई मार्गदर्शन, धन्यवाद।

[संपादित करें] एसआरए के अनुरोध के जवाब में, यहाँ मेरी नियंत्रक है:

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

views: [ 
    'induction.Binder' 
], 

stores: [ 
    'Sections', 
    'Categories', 
    'Tasks' 
], 

init: function() { 
    console.log('Initialized Induction!'); 
} 
}); 

मैं यहाँ ध्यान देना चाहिए कि इस नियंत्रक एक माता पिता के दृश्य, जो बारी में LeftPage लोड होगा लोड करता है - मुझे यकीन है कि नहीं कर रहा हूँ अगर यह किसी भी scoping मुद्दों बनाता है। इसके अलावा, जैसा कि आप देख सकते हैं, एक से अधिक स्टोर लोड हो गए हैं।

Answer 1

आप इस तरह (कुछ बदलाव के साथ अपरीक्षित उदाहरण) कर सकते हैं

Ext.define('BP.view.induction.LeftPage', { 
    extend: 'Ext.Panel', 
    alias : 'widget.leftpage', 

    title: "Left Page", 
    layout: null, 
    layoutConfig: null, 
    store: null, 
    attentive: true, 
    initComponent: function() { 
     var me = this; 
     // begin edit 
     // only set the store if is is not already defined 
     me.store = me.store ? me.store : Ext.StoreMgr.lookup('Sections'); // you may change this to any storename you want 
     // end edit 
     me.layout = { // don't set objects directly in class definitions 
      type: 'accordion', 
      align: 'stretch' 
     }; 
     me.layoutConfig = { // dont set objects directly in class definitions 
      titleCollapse: true, 
      animate: true, 
      activeOnTop: true 
     }; 

     me.callParent(arguments); 
     if (me.attentive) { 
      me.store('load', me.onRebuildContent, me); 
      if (me.store.count() == 0) 
       me.store.load(); 
     } else { 
      me.buildContent(); 
     } 
    }, 
    buildContent: function() { 
     var me = this; 
     function addItem(rec) { 
      me.add({ 
       xtype: 'panel', 
       title: rec.get('titleProperty'), 
       html: rec.get('bodyProprty') 
      }); 
     }; 

     me.store.each(addItem); 
    }, 
    onRebuildContent: function() { 
     var me = this; 
     me.removeAll(); 
     me.buildContent(); 
    } 
}); 

आपकी दुकान कम से कम दो गुण की आवश्यकता होगी; शीर्षक के लिए एक और सामग्री के लिए एक। और आपको इसे तुरंत चालू करने से पहले स्टोर को लोड करने की आवश्यकता है। लेकिन यह आसानी से आपके नियंत्रक के भीतर किया जा सकता है।

संपादित करें टिप्पणी और नए ओपी की जानकारी के आधार पर:

खैर आपके विचार नियंत्रक के नियंत्रण से बाहर एक सा है। इसलिए मैं आपको वैध उदाहरण प्राप्त करने के लिए StoreManager का उपयोग करने की सलाह देता हूं (मैंने कोड संपादित किया है, मुझे बस उपयोग करने के लिए सही स्टोर नहीं पता था)। StoreManager स्टोर के बारे में तब तक पता चलेगा जब तक आप उसे नियंत्रक के भीतर सूचीबद्ध करते हैं (StoreManager बहुत अधिक सक्षम है, लेकिन इस समय आपको यह जानने की आवश्यकता है)। एक और रिहाई के लिए आप भी mixin इस्तेमाल कर सकते हैं bindable जो एक storebinding अधिक स्वच्छ दुकान के बाद नए डेटा (अद्यतन)

पठनीयता के लिए संपादित प्राप्त करता है का प्रबंधन और सक्षम बनाता है अपनी अकॉर्डियन अद्यतन करने के लिए

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