How to set a dynamic width in an vbox in ExtJS4?

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

How about something like this (quickly drawn in the architect):

Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',

height: 600,
width: 1000,
layout: {
    align: 'stretch',
    type: 'hbox'
},
title: 'My Window',

initComponent: function () {
    var me = this;

    Ext.applyIf(me, {
        items: [{
            xtype: 'container',
            flex: 1,
            layout: {
                type: 'fit'
            },
            items: [{
                xtype: 'chart'
            }]
        }, {
            xtype: 'container',
            flex: 4,
            layout: {
                align: 'stretch',
                type: 'vbox'
            },
            items: [{
                xtype: 'container',
                flex: 1,
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                items: [{
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }, {
                    xtype: 'chart',
                    flex: 1,
                }]
            }, {
                xtype: 'gridpanel',
                flex: 1,
                title: 'My Grid Panel',
            }]
        }]
    });
    me.callParent(arguments);
}
});

Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.

Answer 2

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/

Answer 3

I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way). If so then keep a count of these panels (here 4) and for each panel while assigning width you give like

width:(1/countOfchrtLIst2345) * grid.getWidth(),

So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.

In your example it assigns

(1/4) * 200

(thinking grid has width of 200)