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

如果您可以为商店或相关控制器提供示例代码，将会很有帮助，但这仍然比您想象的更容易。当然，它没有什么是开箱即用的，但它是使用听众的完美案例。

每当商店更改数据时，您都希望更新按钮配置。因此，只需将相关的侦听器添加到您的商店 - 可能使用刷新或更新事件（具体取决于您的具体用例）。然后，只要商店数据发生变化，您就需要获取对按钮（或相关菜单）的引用并更新项目。在它最简单的形式中，一个例子可能如下：

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

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

1 个答案: