extjs - ExtJS 4：菜单问题中的下拉按钮

Question

我在下拉按钮菜单中有一些元素（第二个下拉按钮）的面板。当我单击第二个下拉按钮时，主菜单正在关闭。这是我的代码：

创建第一级下拉按钮

    Ext.onReady(function () {
        Ext.create('Ext.Button', {
            text: 'Click me',
            margin: 10,
            renderTo: Ext.getBody(),
            menu: getMenu()
        });
    });

一级菜单

    function getMenu() {
        return Ext.create('Ext.menu.Menu', {
            plain: true,
            items: [
                Ext.create('Ext.panel.Panel', {
                    width: 500,
                    height: 100,
                    bodyPadding: 5,
                    items: [
                        getFirstElement(),
                        getSecondElement()
                    ]
                })
            ]
        });
    }

创建一些元素

    function getFirstElement() {
        return Ext.create('Ext.form.field.Date', {
            fieldLabel: 'Date',
            value: null,
            labelWidth: 50,
            width: 150,
            padding: 5
        });
    }

创建第二级下拉按钮

    function getSecondElement() {
        return Ext.create('Ext.Button', {
            text: 'Select',
            menu: Ext.create('Ext.menu.Menu', {
                plain: true,
                items: [
                    Ext.create('Ext.panel.Panel', {
                        width: 500,
                        height: 100,
                        bodyPadding: 5,
                        items: [
                            {
                                html: '1'
                            },
                            {
                                html: '2'
                            }
                        ]
                    })
                ]
            })
        });
    }

有任何想法吗？

Answer 1

菜单上有一个名为allowOtherMenus. 将其设置为 true 将允许其他菜单与设置了配置选项的菜单同时显示。

因此，您的 getSecondElement 函数变为：

function getSecondElement() {
        return Ext.create('Ext.Button', {
            text: 'Select',
            menu: Ext.create('Ext.menu.Menu', {                
                allowOtherMenus: true,
                plain: true,
                items: [
                    Ext.create('Ext.panel.Panel', {
                        width: 500,
                        height: 100,
                        bodyPadding: 5,
                        items: [
                            {
                                html: '1'
                            },
                            {
                                html: '2'
                            }
                        ]
                    })
                ]
            })
        });
    }

您可以在此 JsFiddle 中找到使用多个菜单的示例：http: //jsfiddle.net/SEVCe/

有关该属性的文档可以在 Sencha文档中找到。