我开始在ExtJS的应用程序的开发。 我使用MVC方法，如在提供ExtJS的文档 。
我有需要与一组手风琴控制向用户呈现一些动态数据。 我有在存储中的数据，但我不知道如何动态地创建手风琴项目（不同于格板，似乎没有成为一个存储数据的方法）。
这是我目前的手风琴视图代码 - 静态物品：
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!'
}]
});
就如何实现上述任何指导，将不胜感激，谢谢。
[编辑]针对SRA的要求，这里是我的控制器：
Ext.define('BP.controller.Induction', {
extend: 'Ext.app.Controller',
views: [
'induction.Binder'
],
stores: [
'Sections',
'Categories',
'Tasks'
],
init: function() {
console.log('Initialized Induction!');
}
});
我应该在这里指出，这个控制器加载父视图，这反过来加载LeftPage观点 - 我不知道这是否造成任何范围的问题。 此外，你可以看到，多个店面被加载。
你可以这样做（有一些调整，例如未经测试）
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();
}
});
您的商店将需要至少两个属性; 一个为标题，一个用于内容。 和实体店需要加载您应该实例在此之前。 但是，可以简单地将控制器内完成。
基于注释和新OP信息编辑：
嗯，你的看法是有点出入控制器的控制。 所以，我建议你只需使用StoreManager接收到有效实例（我编辑的代码，我只是不知道正确的店使用）。 该StoreManager会知道店里只要你列出他在控制器内（StoreManager能够多得多，但是这是所有你需要知道此刻）。 对于进一步释放，你也可以使用混入绑定商店接收到新的数据后，这将管理storebinding更清洁，让您更新手风琴（得到更新）
编辑的可读性
我刚刚清理了一下，包括开关PARAM attentive ，这将允许您使用该组件直接绑定到店，所有的负载事件或作为一种静态的，其中商店应该已经被加载反应。 这所有的一切应该给你一个起点，没有它使复杂。
