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

【问题标题】：ext js how to fit each component using border layoutext js如何使用边框布局适合每个组件
【发布时间】：2023-03-11 14:50:01
【问题描述】：

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

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

【问题讨论】：

那么，您希望grid 和chartContainer 适合mainPanel 吗？因为您正在对它们应用边框布局。适合布局仅适用于mainPanel（它将适合它所在的窗口）
@forgivenson 是的，这正是我正在寻找的。那么我怎样才能让所有的子项都适合它的父项呢？

标签： extjs extjs4 extjs4.1 extjs4.2

【解决方案1】：

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

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

这是完整的示例源代码：

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

    }
});

【讨论】：