Table layout in TabPanel do not resize

[Jerem]

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]

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]

Thanks Condor it's exactly what I needed

[WPriyanka]

[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.