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

Question

我想将商店关联到拆分按钮菜单。我使用的是 extjs 版本 5。我在网上搜索过，甚至浏览过 sencha 文档，但我无法找到实现此目的的方法。

目前我将菜单详细信息保存在变量中并将其分配给 splitbutton xtyoe 菜单属性。我想使用商店实现相同的目的，非常感谢您的帮助!

程序代码:-

        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
        }]
        }   

提前致谢!

Answer 1

如果您能提供商店或相关 Controller 的示例代码，将会很有帮助，但这仍然比您想象的要容易。当然，它不是开箱即用的，但它是使用监听器的完美案例。

每当商店更改数据时，您都希望更新您的按钮配置。因此，只需将相关的监听器添加到您的商店 - 可能使用刷新或更新事件(取决于您的特定用例)。然后，每当商店数据发生变化时，您需要获取对按钮(或关联菜单)的引用并更新项目。在最简单的形式中，示例可能如下所示:

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