Extjs 使用商店创建动态手风琴 [英] Extjs create dynamic accordion using store

问题描述

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

I'm beginning development of an app in extjs. I'm using the MVC approach, as provided in the extjs documentation.

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

I have some dynamic data which needs to present the user with a set of accordion controls. I've got the data in a store, but I do not know how to dynamically create the accordion items (unlike grid panels, there doesn't appear to be a store data method).

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

Here is my current accordion view code - with static items:

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 guidance on how to achieve the above would be appreciated, thank you.

响应 sra 的请求，这是我的控制器:

In response to sra's 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!');
}
});

在这里我应该注意，这个控制器加载了一个父视图，它依次加载了 LeftPage 视图 - 我不确定这是否会产生任何范围问题.此外，如您所见，加载了不止一个商店.

I should note here that this controller loads a parent view, which in turn loads the LeftPage view - I'm not sure if this creates any scoping issues. Furthermore, as you can see, more than one store is loaded.

推荐答案

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

You can do like this (untested example with some tweaks)

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 need to be loaded before you should instantiate this. But that can easily be done within your controller.

根据评论和新 OP 信息进行

好吧，您的视图有点不受控制器的控制.所以我建议你简单地使用 StoreManager 接收一个有效的实例(我已经编辑了代码，我只是不知道要使用正确的商店).只要您在控制器中列出 StoreManager，StoreManager 就会了解商店(StoreManager 的功能更多，但目前您只需要知道这些).对于进一步发布，您还可以使用 mixin bindable 它将管理更干净的商店绑定，并使您能够在商店收到新数据后更新您的手风琴(获取更新)

Well your view is a bit out of control of the controller. So I recommend you to simply use the StoreManager to receive a valid instance (I've edited the code, I just didn'T know the correct store to use). The StoreManager will know about the store as long as you list him within a controller (StoreManager is capable of much more, but that is all you need to know at the moment). For a further release you could also use the mixin bindable which would manage a storebinding more clean and enables you to update your accordion after the store receives new data (get updated)

编辑以提高可读性

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

I've just cleaned it up a bit and included a switch param attentive which would allow you to use this component as directly bound to a store, reacting on all load events or as a sort of static one where the store should already be loaded. All in all this should give you a start without making it to complex.

这篇关于Extjs 使用商店创建动态手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！