ext js how to fit each component using border layout

Question

I'm using border layout and I want to make each region to fit its container. I always see a scroll despite I use fit layout for all items except container panel.

My Ext JS version: 4.2.1

Here's what I tried:

var grid = Ext.create('Ext.grid.Panel', {
    region: 'west'
        ......
});

var chartContainer = Ext.create('Ext.Panel', { // a panel contains a pie chart
    region: 'center'
});


var mainPanel = Ext.create('Ext.Panel', { // my main container panel
    layout: 'border',
    items: [grid, chartContainer]
});


Ext.create('Ext.Window', { // I want to render this main panel inside a window
    layout: 'fit',
    width: 950,
    height: 500,
    items: [mainPanel]
});

screenshot

So, you want grid and chartContainer to be fit inside mainPanel? Because you are applying a border layout to them. The fit layout is only being applied to mainPanel (it will be fit to the window it is inside) — forgivenson
@forgivenson yes this is what exactly I'm looking. So how can I make all child items to fit its parents? — talha06

YetAnotherFrank YetAnotherFrank · Accepted Answer · 2015-05-26T07:22:53

The items should automatically fit their border layout regions.

I just complemented your code with a few things to make it work (example grid data, calling .show() on the main window etc.) and ran it on Sencha Fiddle with Ext JS 4.2.1 without any problems, especially there are no undesired scroll bars.

Here is the full example source code:

Ext.application({
    name: 'Border Layout',

    launch: function() {
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            model: 'Person',
            autoLoad: true,
            fields: ['firstName', 'lastName'],
            proxy: {
                type: 'memory',
                data: [
                    ["Anton", "Mainzel"],
                    ["Bertie", "Mainzel"],
                    ["Connie", "Mainzel"],
                    ["Det", "Mainzel"],
                    ["Eddie", "Mainzel"]
                ],
                reader: {
                    type: 'array'
                }
            }
        });

        var grid = Ext.create('Ext.grid.Panel', {
            region: 'west',
            width: 120,
            split: true,
            store: store,
            columns: [{
                text: "First",
                width: 120,
                dataIndex: 'firstName'
            }, {
                text: "Last",
                width: 120,
                dataIndex: 'lastName'
            }]
        });

        var chartContainer = Ext.create('Ext.Panel', { // a panel contains a pie chart
            region: 'center',
            bodyStyle: 'background-color:green; color:white',
            html: '<p>Center</p>'
        });


        var mainPanel = Ext.create('Ext.Panel', { // my main container panel
            layout: 'border',
            items: [grid, chartContainer]
        });


        Ext.create('Ext.Window', { // I want to render this main panel inside a window
            layout: 'fit',
            width: 950,
            height: 500,
            items: [mainPanel]
        }).show();

    }
});

ext js how to fit each component using border layout

1 Answers