PDA

View Full Version : Table layout in TabPanel do not resize



Jerem
26 May 2010, 1:13 AM
Hi,

I created a specific Panel with table layout containing 5 panels a,b,c,d and e that I want to arrange like this:



aaaabbcc
aaaabbcc
aaaaddee
aaaaddee
Each inner panel in turn holds a PieChart. A number of this multicharts panel are located inside TabPanels.

My problem is that I would like the whole panel to resize to fit its container, giving respect to the display rules above. But to achieve the correct table display, I had to put specific width and height for each inner panel, and rowspan=2 for panel 'a', but then nothing resizes with the container. If I don't put specific width and height in the table layout panels, but use only colspan and rowspan, then display is completely mixed up.
Anchor layout would resize maybe but I would not be able to have 3 columns and 2 rows with anchor. "border" layout might be ok, but how could I specify equality in width and height for b,c,d,e, and doubled dimensions for a ? And I'd prefer not to imbricate too much layouts as table is fine.

As an example of a structure that does not resize the table layout components:
TabPanel --> Panel (fit) --> Panel (table) --> n x Panel --> n x PieChart

I discovered I could not add directly the PieChart in the table layout Panel, had to use intermediate Panel for the 5 items.

To make sure resize was applied, I added the following in the table layout Panel component, but with no effect:


,onResize:function() {
var i = 0;
while (i<this.items.items.length) {
this.items.items[i].doLayout();
i++;
}
}
Any help greatly appreciated, I'm using Ext 3.2.1.

Jeremie

Condor
26 May 2010, 1:34 AM
TableLayout isn't a child sizing layout, so it isn't suitable for your needs.

I recommend switching to a hbox layout with nested vbox layouts, e.g.

{
xtype: 'container',
layout: {type: 'hbox', align: 'stretch'},
items: [{
flex: 2,
title: 'Panel A'
},{
flex: 1,
xtype: 'container',
layout: {type: 'vbox', align: 'stretch'},
items: [{
flex: 1,
title: 'Panel B'
},{
flex: 1,
title: 'Panel D'
}]
},{
flex: 1,
xtype: 'container',
layout: {type: 'vbox', align: 'stretch'},
items: [{
flex: 1,
title: 'Panel C'
},{
flex: 1,
title: 'Panel E'
}]
}]
}

Jerem
26 May 2010, 4:47 AM
Thanks Condor it's exactly what I needed :)

WPriyanka
8 Aug 2018, 12:58 AM
[QUOTE=Condor;471163]TableLayout isn't a child sizing layout, so it isn't suitable for your needs.

i have to use table layout as i need to provide colspan and rowspan to specific components. i can implement colspan by adjusting flex in vbox and hbox nesting but how about rowspan. Is there any workaround to resize table layout children. Thanks.