Question

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

创建第一级下拉按钮

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

第一级的Cretae菜单

    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 documentation中找到。

ExtJS 4：菜单故障下拉按钮

1 个答案: