extJs column layout issue

Question

I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.

var win = Ext.create('Ext.Window', {
    id: 'r1',
    width: eachWindowWidth,
    height: eachWindowHeight,
    hidden: false,
    maximizable: true,
    title: 'Registered Hosts',
    renderTo: Ext.getBody(),
    tbar: [{
        xtype: 'combo',
        width: 50,
        store: optionRegistered,
        mode: 'local',
        fieldLabel: '',
        name: 'answer',
        anchor: '90%',
        displayField: 'answer',
        valueField: 'id'
    }, {
        xtype: 'datefield',
        width: 90,
        name: 'time',
        fieldLabel: '',
        anchor: '90%'
    }, {
        xtype: "label",
        width: 20,
        fieldLabel: text,
        name: 'txt',
        text: 'to'
    }, {
        xtype: 'combo',
        id: 'c22devices',
        width: 50,
        store: optionRegistered,
        mode: 'local',
        fieldLabel: '',
        name: 'answer',
        anchor: '90%',
        displayField: 'answer',
        valueField: 'id'
    }, {
        xtype: 'datefield',
        id: 'cl22devices',
        width: 90,
        name: 'time',
        fieldLabel: '',
        anchor: '90%'
    }, {
        xtype: 'button',
        text: 'Ok'
    }],
    items: [

    {
        xtype: "label",
        fieldLabel: text,
        name: 'txt',
        text: text
    }, {
        xtype: 'tabpanel',
        id: "tabs1",
        activeTab: 0,
        width: eachTabWidth,
        height: eachTabHeight,
        plain: true,
        defaults: {
            autoScroll: true,
            bodyPadding: 10
        },
        items: [{
            title: 'Normal Tab',
            items: [{
                id: 'chartCmp1',
                xtype: 'chart',
                height: 300,
                width: 300,
                style: 'background:#fff',
                animate: true,
                shadow: true,
                store: storeRouge,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['total'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'bottom',
                    grid: true,
                    fields: ['date'],
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        'text-anchor': 'middle',
                        field: 'total',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    xField: 'date',
                    yField: 'total'
                }]
            }]
        }, {
            title: 'Table View',
            xtype: 'grid',
            id: "gridChart1",
            width: 200,
            height: 200,
            collapsible: false,
            store: storeRouge,
            multiSelect: true,
            viewConfig: {
                emptyText: 'No information to display'
            },
            columns: [{
                text: 'Devices',
                flex: 50,
                dataIndex: 'date'
            }, {
                text: 'Pass',
                flex: 50,
                dataIndex: 'total'
            }]
        }]
    }],
    listeners: {

        resize: function () {
            Ext.getCmp("tabs1").setWidth(this.width);
            Ext.getCmp("tabs1").setHeight(this.height);
            Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
            Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
        }
    }
});

Answer 1

The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).

This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.