Sencha 6.5（现代）如何动态更改标题栏中菜单中的项目？

Question

考虑一下我在应用程序中创建的网格：

    {
        xtype: 'ordergrid',
        itemId: 'ordergrid',

        titleBar: {
            shadow: false,
            items: [{
                align: 'right',
                xtype: 'button',
                text: 'Update status',
                stretchMenu: true,
                menu: {
                    itemId: 'status_menu',
                    defaults: {
                        handler: 'updateStatus'
                    },
                    indented: false,
                    items: [{
                        text: 'test1',
                        value: 'test1'
                    }, {
                        text: 'test2',
                        value: 'test2'
                    }, {
                        text: 'test3',
                        value: 'test4'
                    }]
                }
            }]
        },

使用以下ordergrid定义ordergrid ：

extend: 'Ext.grid.Grid',
xtype: 'ordergrid',

我希望动态修改menu items 。 我首先尝试通过一家商店这样做：

                menu: {
                    itemId: 'status_menu',
                    defaults: {
                        handler: 'updateStatus'
                    },
                    indented: false,
                    store: { type: 'status' }

虽然这似乎不起作用。 然后，我尝试在某个控制器的init函数期间通过组件查询访问此菜单：

Ext.define('BinkPortalFrontend.view.main.OrderController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.order',

    init: function () {
        console.log('..... initializing ......');
        const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
        const menu = menus[0];
        menu.setItems([{
            text: 'some',
            value: 'some'
        }, {
            text: 'new',
            value: 'mew'
        }]);
    },
};

但是，这将返回错误：“无法读取未定义的属性'setItems'”调试显示出明显的问题：它找不到任何菜单。

更重要的是，甚至是“全部捕获”查询

Ext.ComponentQuery.query('menu');

要么

Ext.ComponentQuery.query('#status_menu');

显示一个空数组：这是怎么回事？ （我绝对可以从其初始加载中看到菜单）。

Answer 1

没有创建菜单的原因之一。 菜单将创建按钮时会tap或当getMenu()方法被调用。

如果您想使用Ext.ComponentQuery.query()获取menu ，那么您需要使用button initialize事件并使用getMenu()方法强制创建菜单，如下所示：-

{
    xtype: 'button',
    text: 'Update status',
    stretchMenu: true,
    menu: {
        itemId: 'status_menu',
        indented: false,
        items: [{
            text: 'test1',
            value: 'test1'
        }, {
            text: 'test2',
            value: 'test2'
        }, {
            text: 'test3',
            value: 'test4'
        }]
    },
    listeners: {
        initialize: function(btn) {
            Ext.defer(function() {
                // This will print undefined because menu have not created  
                console.log(Ext.ComponentQuery.query('#status_menu')[0]);

                //When we use getMenu method it will create menu item  
                btn.getMenu().hide();

                // This will print menu component  
                console.log(Ext.ComponentQuery.query('#status_menu')[0]);
            }, 10)
        }
    }
}

另一种方式，你可以使用getMenu()的方法button 。 它将返回menu组件。

在此FIDDLE中 ，我使用grid ， button和menu创建了一个演示。 我希望这会帮助/指导您达到要求。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"
            }]
        });

        Ext.create('Ext.grid.Grid', {
            title: 'Change menu items dynamically',
            titleBar: {
                shadow: false,
                items: [{
                    align: 'right',
                    xtype: 'button',
                    text: 'Update status',
                    stretchMenu: true,
                    itemId: 'statusbtn',
                    menu: {
                        itemId: 'status_menu',
                        defaults: {
                            // handler: 'updateStatus'
                        },
                        indented: false,
                        items: [{
                            text: 'test1',
                            value: 'test1'
                        }, {
                            text: 'test2',
                            value: 'test2'
                        }, {
                            text: 'test3',
                            value: 'test4'
                        }]
                    },
                    listeners: {
                        initialize: function (btn) {
                            Ext.defer(function () {
                                // This will undefined because menu has not been created
                                console.log(Ext.ComponentQuery.query('#status_menu')[0]);

                                //When we use getMenu method it will create menu item
                                btn.getMenu().hide();

                                // This will menu component
                                console.log(Ext.ComponentQuery.query('#status_menu')[0]);
                            }, 10)
                        }
                    }
                }, {
                    xtype: 'button',
                    align: 'right',
                    text: 'Change Items',
                    handler: function (btn) {
                        var newItems = [];

                        store.each(rec => {
                            newItems.push({
                                text: rec.get('name'),
                                value: rec.get('name')
                            })
                        });
                        /*
                         *  You can also get menu using button
                         *  btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
                         */
                        Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
                        Ext.toast('Menu items has been change. Please check', 2000);
                    }
                }]
            },
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                width: 200
            }, {
                text: 'Email',
                dataIndex: 'email',
                width: 250
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                width: 120
            }],
            height: 200,
            layout: 'fit',
            fullscreen: true
        });
    }
});

有关组件的更多详细信息，您还可以看到此ComponentManager