Extjs：如何为自定义菜单定义工作布局

Question

ExtJS ：我有一个要关联菜单的按钮。 我想自己定义菜单的布局，根据我从文档中收集的内容 ，可以直接指定布局。

按钮+菜单 ：

{
    xtype: 'button',        
    menu: {
        xtype: 'menu',
        plain: true,
        layout: 'fit',          
        height: 300,
        width: 200,
        items:
        [
            {
                xtype: 'container',
                layout: 'vbox',
                layoutConfig: {
                    align: 'stretch',
                    pack: 'start'
                },
                items:
                [
                    {
                        xtype: 'label',
                        text: 'Label1'
                    }, {
                        xtype: 'label',
                        text: 'Label2'
                    }, {
                        xtype: 'textfield'
                    }
                ]
            }
        ]
    },
    menuAlign: 'bl-tl',
    text: 'Button'
}

结果的高度为零，但是如果我将xtype: 'menu'更改为xtype: 'panel'并将其放在Ext.Window ，则它也可以像我想要的那样工作。

问题 ：如何自定义菜单，以正确的高度得到想要的东西？

Answer 1

我在Sencha论坛上提出了相同的问题，并获得了以下帮助：

• http://www.sencha.com/forum/showthread.php?116614-How-to-define-a-working-layout-for-a-custom-menu

对我来说，关键是不要在菜单上设置任何布局或大小属性，而应在嵌套容器上进行设置。 forceLayout: true属性也可能对我有所帮助：）

Answer 2

简单的解决方案，使用您的答案和论坛帖子，就我而言，我将菜单传递给按钮。 这是我根据上述内容在Ext 4.0.2中提出的。 只是想我会发布，以防万一以后有人来访问，或者如果sencha论坛停滞不前。

首先，我给菜单项指定一个锚点和一个height 。 请注意，home_menu只是一个常规数组。

home_menu.push({
   text:name,
   value:id,
   scope:this,
   anchor:'100%',
   height:30,
   handler:function(o,e)
    {
       //...                         
    }});

然后，菜单本身的重要配置是forceLayout和autoHeight ：

h_btn.menu = Ext.create('Ext.menu.Menu',
{
    items:home_menu
    ,forceLayout: true 
    ,autoHeight:true     //so it listens to the height of the items
});