PDA

View Full Version : [HELP] - Table Layout width of children



Grolubao
5 Dec 2011, 6:09 AM
Hi All,
I'm trying a very small example with table layout (it needs to be this because the client will configure it) and it seems like the panels inside don't share the same width amongst them.



var newPanel = new Ext.Panel({
title : 'Test',
layout : 'table',
defaults : {
bodyStyle : 'height: 250px'
},
layoutConfig : {
columns : 2,
rows : 1,
tableAttrs : {
style : {
width : '100%'
}
}
},
items: [
{
xtype: 'panel',
title: 'Test 1'
},
{
xtype: 'panel',
title: 'Test 21111111111'
}
]
});


This produces the following:

http://www.sencha.com/forum/image/png;base64,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29799

So instead of sharing the same width it seems like the second panel gets much more width because the title is bigger.
I cannot set the width manually because I want it to resize properly and as said before I cannot change the layout to vbox and hbox.

Can someone help me here? :(

Thanks!

mitchellsimoens
5 Dec 2011, 2:18 PM
That's because the items don't have a width. You have to specify a width.

Grolubao
5 Dec 2011, 2:19 PM
Correct, but I wanted the width to be dynamic, similar to what is there in hbox/vbox and to resize properly.

Isn't this possible?

mitchellsimoens
5 Dec 2011, 2:23 PM
Not in table layout.