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

Question

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

创建第一级下拉按钮

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

为1级

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() 
        ] 
       }) 
      ] 
     }); 
    } 

Cretae菜单创建一些元素

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/

关于该属性的文件可以在煎茶documentation被发现。