ExtJS 5-动态添加项目以从商店拆分按钮菜单

Question

I want to associate a store to split button menu. I am using extjs version 5. I have searched on the web and even went through sencha documentation but I couldn't figure out a way to achieve this.

Currently i'm holding the menu details in variable and assigning it to the splitbutton xtyoe menu property.I want to achieve the same using store, your help is much appreciated!

Program Code:-

        var menuJSON = [{
            text:'Menu1',
            menu:[{text:'Submenu1'},{text:'Submenu2'}]
        },{
            text:'Menu2',
            menu:[{text:'Submenu1'},{text:'Submenu2'}]
        },{
            text:'Menu3',
            menu:[{text:'Submenu1'},{text:'Submenu2'}]
        },{
            text:'Menu4'
        },{
            text:'Menu5',
            menu:[{text:'Submenu1'},{text:'Submenu2'}]
        }];
        {
        region: 'south',
        fbar: [{
            xtype:'splitbutton',
            id: 'app-starterMenu',
            text:'Start',
            scale:'small',
            iconCls:'icon-start',
            menuAlign: 'bl-tl',
            menu: menuJSON
        }]
        }   

Thanks in advance!

Answer 1

It would be helpful if you can provide example code for the store or relative controller, however this is still easier than you might think. Of course, it's nothing that comes out of the box, but it's a perfect case of using listeners.

Whenever the store changes data, you want to update your button configuration. Therefore just add the relevant listener to your store - maybe using the refresh or update event (depending on your specific use case). Then whenever the store data changes, you need to grab a reference to your button (or associated menu) and update the items. In it's most simplistic form, an example might be as follows:

store: {
    listeners: {
        refresh: function(store) {
            // Get all the raw data from records and use it to set items on the menu
            var rawData = Ext.Array.pluck(store.getRange(),'data');
            Ext.getCmp('app-starterMenu').setMenu({
                items: rawData
            });
            // *OR* Loop through the store data conditionally and include what you need
            Ext.getCmp('app-starterMenu').getMenu().removeAll();
            store.each(function(record){
                Ext.getCmp('app-starterMenu').getMenu().add(record.getData());
            }); 
        }
    }
}