Extjs creates a dynamic accordion using storage

Question

I'm starting application development in extjs. I am using the MVC approach as provided in the extjs documentation .

I have dynamic data that should present the user with a set of accordion controls. I have data in the store, but I don’t know how to dynamically create accordion elements (unlike the grid panels, there seems to be no storage data method).

Here is my current accordion representation code - with static elements:

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!' }] }); 

Any recommendations on how to achieve the above will be appreciated, thanks.

[Edit] In response to the sra request, here is my controller:

 Ext.define('BP.controller.Induction', { extend: 'Ext.app.Controller', views: [ 'induction.Binder' ], stores: [ 'Sections', 'Categories', 'Tasks' ], init: function() { console.log('Initialized Induction!'); } }); 

Here I should note that this controller loads the parent view, which in turn loads the LeftPage view - I'm not sure if this creates any problems with the scope definition. In addition, as you can see, several repositories are loaded.

Answer 1

You can do this (unverified example with some settings)

 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(); } }); 

Your store will need at least two properties; one for the title and one for the content. And the store must be loaded before you must create it. But this is easy to do in your controller.

Edit based on comment and new OP info:

Well, your gaze will get a little out of control of the controller. Therefore, I recommend that you simply use StoreManager to get a valid copy (I edited the code, I just did not know which correct store to use). StoreManager will know about the store while you list it in the controller (StoreManager is capable of much more, but that's all you need to know at the moment). For further release, you can also use mixin bindable , which will manage the storage more clean and allow you to update your accordion after the store receives new data (receive an update)

Edit for readability

I just cleaned it up a bit and turned on the switch attentive parameter, which allows you to use this component as directly connected to the repository, respond to all loading events, or as a kind of static, where the repository should already be loaded. In general, this should give you a start without making it difficult.