PDA

View Full Version : How to define a working layout for a custom menu



Chau
23 Nov 2010, 4:10 AM
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 (http://dev.sencha.com/deploy/dev/docs/?class=Ext.menu.Menu), 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?

Condor
23 Nov 2010, 4:41 AM
1. This is overnested. The menu itself can be layout:'vbox', so you don't need the extra container.
2. Menu sometimes needs to be configured with forceLayout:true to display correctly.

Chau
23 Nov 2010, 5:09 AM
1. This is overnested. The menu itself can be layout:'vbox', so you don't need the extra container.

Ofcourse you are right and a more simple code I get:


xtype: 'button',
menu: {
xtype: 'menu',
plain: true,
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
forceLayout: true,
width: 200,
height: 200,
items:
[
{
xtype: 'label',
text: 'Label1'
}, {
xtype: 'label',
text: 'Label2'
}, {
xtype: 'textfield'
}
]
},
menuAlign: 'b-t',
flex: 1,
text: 'Button'
2. Menu sometimes needs to be configured with forceLayout:true to display correctly.
forceLayout:true doesn't seem to help me. The structure I get using the above code is like this:


<div>
<a/>
<ul> <- Has height = 0px
<div> <- Has no height information.
<label/> /
<label/> <--- All has height > 0px.
<input> \
</div>
</ul>
</div>I tend to get this height is zero problem alot - what is the reason and how should I cure it?

Condor
23 Nov 2010, 5:13 AM
And if you do use the extra container and give it the specified height and width instead of applying it to the menu?

Chau
23 Nov 2010, 5:29 AM
And if you do use the extra container and give it the specified height and width instead of applying it to the menu?
Hi Condor, that actually works. I would though prefer if the inner contents (the labels and the input) could be the source of the height instead of me specifying it directly in the container. - Is that possible?

Condor
23 Nov 2010, 5:37 AM
Maybe. Try making the container autoHeight:true and layout:'anchor' and the fields anchor:'100%'.

Chau
23 Nov 2010, 6:21 AM
Maybe. Try making the container autoHeight:true and layout:'anchor' and the fields anchor:'100%'.
Maybe? Definitely :)

Thanks a lot Condor, you have made my day much better ;)