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

问题描述

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

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 '不知道这是否会造成任何范围界定的问题。另外，你可以看到，加载了多个商店。

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有更多的功能，但这是您现在需要知道的一切）。要进一步发布，您还可以使用mixin 可绑定 ，这将管理更加干净的存储绑定，并使您能够在商店收到新数据（更新）后更新手风琴。

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屋！