ExtJS6：将商店绑定到面板项目答案

【问题标题】：ExtJS6: Binding store to panel itemsExtJS6：将商店绑定到面板项目
【发布时间】：2017-01-05 16:13:09
【问题描述】：

ExtJS6 是否允许将商店绑定到简单的面板项目，以便它提取指定的列并将它们显示为项目 { xtype：'面板'， id: 'master_list', 标题：'主列表'，默认类型：'按钮'，绑定：{ 商店：'{zones}' } }

【问题讨论】：

否，因为这需要某种记录 -> 组件映射功能。这将是为自己写的东西。

【解决方案1】：

atm 在 extJS 6 中，面板上的项目配置不是可绑定项目，主要是因为面板上没有 getItem() 和 setItems() 方法。您总是可以覆盖面板并添加该功能，它看起来像这样：

Ext.define("Ext.panel.StoreButtonPanel", {
    /* extend a panel so you get same base functionality of a panel */
    extend: 'Ext.panel.Panel',
    /* other configs and overrides you might want */


    setStore:function(){
        // function to bind the store to panel
    },

    getStore:function(){
        // function to get store from panel
    }


    setItems: fuunction(){
        var me = this, 
            myStore = me.getStore();

        // loop through store and add items. 
        myStore.each(function(storeItem){
            // create the items that you want from teh store via loop and using 
            // storeItem
            Ext.create('Ext.button.Button', { 
                text: storeItem.get('text'),
                /* other things here if needed */
            })
        });

    },


    init: function(){
        var me = this;

        // call method to create items if a store is found. 
        if(me.getStore()){
            me.setItems();
        }
        me.callParent();
    }
});

【讨论】：

您稍后会在定义不处理参数的 setter 时自行考虑。尝试遵守约定。关于您的要求，我认为您可以创建一个组件数据视图 - 组件，监听存储更改并创建子项

【解决方案2】：

您可以将商店参数添加到您的面板。 Extjs 将直接加载存储。

store: Ext.Create('Yourapp.store.storename'),

【讨论】：