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 будут закрыты.

Во-первых, я даю пунктам меню якорь и высоту .Обратите внимание, что 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
});