Results 1 to 4 of 4

Thread: Table layout in TabPanel do not resize

  1. #1
    Ext User
    Join Date
    Mar 2010
    Location
    France / Marseille
    Posts
    6
    Vote Rating
    0
      0  

    Default Table layout in TabPanel do not resize

    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:

    Code:
    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:
    Code:
      ,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

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    132
      0  

    Default

    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.
    Code:
    {
      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'
        }]
      }]
    }

  3. #3
    Ext User
    Join Date
    Mar 2010
    Location
    France / Marseille
    Posts
    6
    Vote Rating
    0
      0  

    Default

    Thanks Condor it's exactly what I needed

  4. #4
    Sencha User
    Join Date
    Mar 2017
    Posts
    11
    Vote Rating
    0
      0  

    Default

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

Similar Threads

  1. Charts in 2x2 table and dynamic resize (anchor layout-like)
    By thibm in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 26 Oct 2010, 5:32 AM
  2. Replies: 4
    Last Post: 26 Dec 2009, 8:43 AM
  3. Replies: 11
    Last Post: 14 Oct 2009, 7:46 AM
  4. Window resize under IE with TabPanel and border layout
    By NicoP in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 3 Nov 2008, 1:37 AM
  5. Table-layout in part of TabPanel not working
    By thekryz in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 19 Feb 2008, 8:16 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •