проблема с макетом столбца extJs

У меня 3 extJs Windows. У каждого есть элемент управления формой, а затем две вкладки, отображающие диаграмму. В настоящее время все окна появляются в одном и том же месте, и мне приходится перетаскивать их, чтобы они стояли в ряд, как здесь | | | . Как я могу создать 3 столбца на экране и поместить каждое окно в один из них. Пожалуйста, найдите код одного из окон ниже. И да, я видел эту ссылку http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html, но мне это не помогает. Никакой контент не отображается, если я создаю макет из 3 столбцов, как указано в ссылке. Пожалуйста, предположите, что все окна имеют одинаковый код и предложите способ. Еще одна вещь, у меня есть закрываемая и максимизируемая функция во всех окнах. Спасибо.

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);
        }
    }
});