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

发布于 2024-10-04 02:41:40 字数 1246 浏览 4 评论 0原文

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 内，然后它就像我想要的那样工作。

问题：我应该如何自定义菜单才能以正确的高度获得我想要的内容？

原文

ExtJS:
I have a button where I want to associate a menu. I want to define the layout of the menu myself, and from what I gather from the documentation, the layout can be specified directly.

Button + menu:

{
    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'
}

The result has zero height, but If I change the xtype: 'menu' to xtype: 'panel' and put it inside an Ext.Window, then it works like I want it too.

Question: How should I customize the menu to get what I want with the correct height?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

唔猫 2024-10-11 02:41:40

我在 Sencha 论坛上问了同样的问题并得到了以下帮助：

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

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

回复收藏 0 原文

临风闻羌笛 2024-10-11 02:41:40

简单的解决方案，使用您的答案和论坛帖子，在我的例子中，我将菜单传递到按钮中。这是我在 Ext 4.0.2 中基于上述内容想出来的。只是想我会发帖以防万一以后有人来访问，或者万一煎茶论坛瘫痪了。

首先，我为菜单项指定一个锚点和一个高度。请注意，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
});

Simple solution, using the your answer and the forum post, in my case I am passing a menu into a button. This is what I came up with in Ext 4.0.2 based on the above. Just thought I would post in case anyone comes to visit later, or in case the sencha forums are ever down.

First, I give the menu items an anchor and a height. Note that home_menu is simply a regular array.

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

Then, the important configs for the menu itself are forceLayout and 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
});

回复收藏 0 原文

~没有更多了~