Question

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

Before re sizing the west region

我使用“拆分”，以便使用拆分器调整西部区域。问题是，当我尝试重新调整西部区域的大小时，内部面板的尺寸不合适。见下图。

after re sizing west region

我的代码非常小，我认为没有错。

以下是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'));

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

P.S。我使用的是ExtJS 4.2.1.883

Answer 1

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

在包含3个内部面板的west_panel中，我添加了一个监听器来调整＆＃34;调整大小＆＃34;事件，这将有力地重新计算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 2

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

Answer 3

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

例如，我目前正在处理一个具有可折叠的West区域和Split = True的页面。该地区的MinWidth是200。

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

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

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

3 个答案: