Question

I want the following layout (the chart count in the top right is dynamic):

I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.

In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)

The Problem is now, that these 2 containers want a fixed width, or else they get a zero width…

Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.

I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn’t work. It just made the 2 containers in the vbox use the same height.

Any ideas?

Answer 1

Have you tried table layout? It’s quite easy to create such layout with it. Example:

Ext.onReady(function(){

  Ext.create('Ext.Viewport', {
    renderTo: Ext.getBody(),
    style: 'border: 1px solid red',

    layout: {
        type: 'table',
        columns: 5,
      tdAttrs: {
        style: 'padding: 20px; border: 1px solid blue;'
      }
    },

    defaults: {
      bodyStyle: 'border: 1px solid red'
    },

    items: [
      { xtype: 'panel', html: 'Chart1', rowspan: 2 },
      { xtype: 'panel', html: 'Chart2' },
      { xtype: 'panel', html: 'Chart3' },
      { xtype: 'panel', html: 'Chart4' },
      { xtype: 'panel', html: 'Chart5' },
      { xtype: 'panel', html: 'Grid', colspan: 4 }
    ]

  });

});

Working sample: http://jsbin.com/ojijax/1/

---

To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let’s say chartPanel – this will have hbox layout. Then wrap chartPanel and grid into another container – panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.

Working sample: http://jsfiddle.net/75T7h/