0

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

    {
        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为：

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

我希望动态修改items。menu我首先尝试通过商店进行此操作：

                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');

显示一个空数组：那么发生了什么？（我肯定会从初始加载中看到菜单）。

4

1 回答 1

0

未创建菜单的原因之一。tap每当按钮或getMenu()方法被调用时，菜单就会被创建。

如果你想得到你的menu使用Ext.ComponentQuery.query()，那么为此你需要使用initialize事件button并使用如下方法强制创建菜单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演示。我希望这将帮助/指导您实现您的要求。buttonmenu

代码片段

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

于 2018-02-28T05:51:44.463 回答