6

我开始在 extjs 中开发应用程序。我正在使用extjs 文档中提供的 MVC 方法。

我有一些动态数据需要向用户展示一组手风琴控件。我在商店中有数据，但我不知道如何动态创建手风琴项目（与网格面板不同，似乎没有商店数据方法）。

这是我当前的手风琴视图代码 - 带有静态项目：

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 视图——我不确定这是否会产生任何范围问题。此外，如您所见，加载了多个商店。

4

1 回答 1

7

你可以这样做（经过一些调整的未经测试的示例）

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 就会知道该商店（StoreManager 的功能要多得多，但目前您只需要知道这些）。对于进一步的版本，您还可以使用 mixin bindable，它可以更干净地管理 storebinding，并使您能够在 store 收到新数据后更新您的手风琴（获取更新）

编辑以提高可读性

我刚刚对其进行了一些清理，并包含了一个 switch 参数attentive，它允许您将此组件用作直接绑定到商店、对所有加载事件作出反应或作为一种静态事件，其中商店应该已经加载。总而言之，这应该给你一个开始，而不会使它变得复杂。

于 2012-11-12T11:17:32.760 回答