ExtJS 4.2.1：在面板边框布局中使用“拆分”，调整大小问题

Question

我有一个带有边框布局的面板。该面板具有中心区域和西部区域。在西部地区，有一个带有边框布局的面板，其中包含 3 个面板。见下图。

我使用“拆分”，以便使用拆分器调整西部区域的大小。问题是，当我尝试调整西部区域的大小时，内部面板的大小没有正确调整。见下图。

我的代码非常少，我看不出有什么问题。

这是JSFiddle of my code 下面是生成这些面板的代码。

this.mainPanel = Ext.create('Ext.panel.Panel', {
    layout: 'border',
    height: 1000,
    width: 1400,
    items: [{
        xtype: 'panel',
        region: 'center',
        layout: 'border',
        id: 'center-panel',
        items: [{
            xtype: 'panel',
            layout: 'border',
            region: 'center',
            items: [{
                xtype: 'panel',
                region: 'center',
                id: 'grid-panel',
                layout: 'fit'
            }, {
                xtype: 'panel',
                id: 'south-panel',
                region: 'south',
                split: true,
                title: 'Additional data represented by this event',
                height: 200
            }]

        }]
    }, {
        xtype: 'panel',
        ref: 'west_panel',
        region: 'west',
        split: true,
        title: 'Show/Hide',
        width: 300,
        minWidth: 175,
        maxWidth: 500,
        items: [{
            xtype: 'panel',
            split: true,
            collapsed: true,
            title: 'Show/Hide by Time'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by activity types and tags'
        }, {
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'Show/Hide by participant types and tags'
        }]
    }]
});
this.mainPanel.render(document.getElementById('example-grid'));

知道如何解决这个问题吗？

附：我正在使用 ExtJS 4.2.1.883

Answer 1

我之前已经解决了这个类型问题，结合区域上的 MinWidth 和嵌套在给定区域中的面板上的 FitLayout。

例如，我目前正在处理具有可折叠的西部区域且拆分 = True 的页面。该区域的 MinWidth 为 200。

我在 Layout = FitLayout 的区域内有一个 TreePanel，并且没有设置与宽度相关的属性值。我在 TreePanel 上有一个黑色边框样式，当我拉该区域上的拆分条时，它确认它正在调整大小。

如果您需要更多解释，请告诉我。关键是删除 TreePanel 上所有与宽度（包括自动宽度）相关的属性，并将其布局设置为 Fit。该区域不需要 MinWidth；它的存在是为了可用性，因为该区域也可以折叠。

Answer 2

这就是我修复它的方法。我找不到问题的正确原因，因此它不是一个正确的解决方案，但它是一个简单的解决方法，可以解决它。

在包含 3 个内部面板的 west_panel 中，我为“resize”事件添加了一个侦听器，该事件将强制重新计算 west_panel 子级的位置和大小。下面是显示我的 west_panel 及其侦听器的代码部分。

{
    xtype: 'panel',
    region: 'west',
    split: true,
    id: 'west_panel',
    title: 'Show/Hide',
    width: 300,
    minWidth: 175,
    maxWidth: 500,
    listeners: {
        resize: Ext.Function.bind(function(comp, width, height,
                oldWidth, oldHeight, eOpts) {
            comp.doLayout();
        }, this)
    },
    items: [{
      xtype: 'panel',
      split: true,
      collapsed: true,
      title: 'Show/Hide by Time'
    },

    // other code below
    // .
    // .
    // .
}

Answer 3

在西边配置layout:'accordion'。请参阅 accordion 配置选项以根据您的需要对其进行微调