ext js如何使用边框布局来适合每个组件

Question

我正在使用border布局，我想让每个区域都适合其容器。尽管我对除容器面板之外的所有项目使用fit布局，我总是看到滚动。

My Ext JS版本： 4.2.1

以下是我的尝试：

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

Answer 1

项目应自动适合其边框布局区域。

我只是用一些东西补充你的代码以使它工作（例如网格数据，在主窗口上调用.show()等）并在Sencha Fiddle上使用Ext JS 4.2.1运行它而不用任何问题，特别是没有不受欢迎的滚动条。

以下是完整的示例源代码：

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

    }
});