Extjs: How to define a working layout for a custom menu

2
votes

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?

2
extjsmenuheightcustomization
Wait, are you saying you want a menu INSIDE a button? Or do you mean you want a menu triggered by a button click? - Jere
@Jere: I just want the menu to be triggered by clicking the button. Thanks for clearing that one out ;) - Chau

2 Answers

3
votes

I asked the same question at the Sencha forums and got the following help:

The key points for me was to not set any layout or size attributes on the menu, but instead do it on the nested container. The forceLayout: true attribute might also have helped me :)

1
votes

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