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