ExtJS6: Binding store to panel items

Question

Does ExtJS6 allows a store binding to simple panel items, such that it plucks specified columns and display them as item { xtype: 'panel', id: 'master_list', title: 'MasterList', defaultType: 'button', bind: { store: '{zones}' } }

Answer 1

Atm in extJS 6, the item config on a panel is not a bindable item, mostly due to the fact that there is no getItem() and setItems() method found on the panel. You could always override panel and add that functionality and it would look something like this:

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();
    }
});

Answer 2

You can add store parameter to your panel. Extjs will load the store directly.

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