代码之家 › 专栏 › 技术社区 › Chau

Extjs:如何定义自定义菜单的工作布局

customization height menu extjs

Chau · 技术社区 · 14 年前

扩展js : 我有一个按钮想关联菜单。我想自己定义菜单的布局,以及从 documentation ,可以直接指定布局。

按钮+菜单 :

{
    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 ,然后它的工作就像我也想要它一样。

问题 :我应该如何定制菜单以获得正确高度的所需内容?

2 回复 | 直到 14 年前

Chau 14 年前

我问了同样的问题森查论坛并获得以下帮助:

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

对我来说关键是不在菜单上设置任何布局或大小属性,但在嵌套容器上进行设置。这个 forceLayout: true 属性可能也帮助了我:)

sam 13 年前

简单的解决方案,使用您的答案和论坛帖子,在我的情况下,我将菜单传递到一个按钮。这就是我在Ext4.0.2中基于上述内容得出的结论。只是想我会发帖,以防有人晚些时候来访问,或者万一森查论坛永远关闭。

首先,我给菜单项锚以及高度 . 注意home_菜单只是一个常规数组。

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

然后,菜单本身的重要配置是 强制布局 和 自动高度 :

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