Extjs: Comment définir une mise en page de travail pour un menu personnalisé

Question

ExtJS: J'ai un bouton où je veux associer un menu. Je veux définir la disposition du menu moi-même, et d'après ce que je comprends du documentation, la disposition peut être spécifiée directement.

Bouton + 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' 
} 

Le résultat a une hauteur nulle, mais si je change le xtype: 'menu'-xtype: 'panel' et le mettre dans un Ext.Window, il fonctionne comme je le veux aussi.

Question: Comment est-ce que je devrais customiser le menu pour obtenir ce que je veux avec la bonne taille?

Answer 1

j'ai posé la même question au Sencha forums et obtenu l'aide suivante:

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

Les points clés pour moi était de pas établir des attributs de mise en page ou de taille dans le menu, mais au lieu de le faire sur le conteneur imbriqué. L'attribut forceLayout: true pourrait aussi m'a aidé :)

Answer 2

Solution simple, en utilisant votre réponse et le forum, dans mon cas je passe un menu dans un bouton. C'est ce que j'ai trouvé dans Ext 4.0.2 basé sur ce qui précède. Je pensais juste poster au cas où quelqu'un viendrait visiter plus tard, ou au cas où les forums Sencha sont en panne.

D'abord, je donne les éléments de menu ancre et hauteur. Notez que home_menu est simplement un tableau régulier.

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

Ensuite, les configs importants pour le menu lui-même sont forceLayout et 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 
});