Question

我有一个容器，里面有两个面板。我希望两个面板都可折叠（同时没有一个面板或只有一个面板可以折叠），如果任何面板折叠，其他面板应占用所有剩余空间。此外，我希望能够使用Ext.resizer.Splitter调整两个面板的大小。

我尝试了（h / v）框/边框布局的不同组合，但它们都没有正常工作。

好像Ext.layout.container.Accordion似乎是我需要的，但正如我所看到的，它可以与Ext.resizer.Splitter开箱即用。

此外，我希望能够使用单个 Ext.resizer.Splitter折叠两个面板，但我可以看到它不可用，我必须覆盖它。我是对的吗？

我正在使用ExtJS版本4.2.1。

Answer 1

这有帮助吗？

Ext.application({
name: 'Fiddle',

launch: function () {

    Ext.create('Ext.Container', {
        height: 500,
        renderTo: Ext.getBody(),
        width: 500,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },

        items: [{
            xtype: 'panel',
            reference: 'panel1',
            title: 'Top panel',
            collapsible: true,  // To allow collapse
            flex: 1,
            bodyStyle: 'background: #dadada',
            listeners: {
                collapse: function(){
                    this.up().down("[reference='panel2']").expand();
                }
            }
        }, 
        {
            xtype: 'splitter' 
        },
        {
            xtype: 'panel',
            reference: 'panel2',
            title: 'Bottom panel',
            collapsible: true,  // To allow collapse
            flex: 1,
            bodyStyle: 'background: #999',
            listeners: {
                collapse: function(){
                    this.up().down("[reference='panel1']").expand();
                }
            }
        }]

    });
}});

此处vbox用于垂直设置面板（flex属性告诉他们彼此需要多少空间）。设置为true的collapsible属性使它们可折叠。然后每个面板都有一个事件，当目标面板折叠时，该事件会扩展兄弟面板。这样，至少有一个面板始终展开，您可以使用分割器调整它们的大小！

修改1 ：

前面的代码示例不是通用的，如果我们使用animCollapse: false设置面板，则不会按预期做出反应。通用解决方案如下所示：

// Our extended container
Ext.define('MyVboxContainer', {
    extend: 'Ext.Container',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    // We do the setup on initiating the component
    initComponent: function () {
        var me = this;
        var panelCount = 0;

        // For each child component
        this.items.forEach(function (comp) {

            // If the component is a panel
            if (comp.xtype === 'panel') {

                // We add an unique ref
                comp.reference = 'panel' + panelCount;

                // Increment the total number of panels
                panelCount++

                // And listeners for beforecollapse, collapse and expand
                comp.listeners = {
                    // On collpase, we track the last collapsed panel
                    'collapse': function () {
                        me.closedCount++;

                        me.lastClosed = this.reference;
                    },

                    // On expand we decrement the total number of panels collapsed
                    'expand': function () {
                        me.closedCount--;
                    },

                    // If this is the last panel being collapsed,
                    // we expand the previous collapsed panel
                    // Note: this cannot be done on the expand event
                    // if the panel has animCollapse: false
                    'beforecollapse': function () {
                        if (me.closedCount + 1 == me.totalPanels) {
                            me.down("[reference='" + me.lastClosed + "']").expand();
                        }
                    }
                };
            }
        });

        this.totalPanels = panelCount; // total number of panels
        this.lastClosed = null; // Last collapsed panel
        this.closedCount = 0; // How many panels we have closed

        console.log("Total panels are: " + this.totalPanels)

        this.callParent();
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.create('MyVboxContainer', {
            height: 500,
            width: 500,
            renderTo: Ext.getBody(),

            items: [{
                xtype: 'panel',
                animCollapse: false,
                title: 'Top panel',
                collapsible: true, // To allow collapse
                flex: 1,
                bodyStyle: 'background: #dadada'
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'panel',
                title: 'Middle panel',
                animCollapse: false,
                collapsible: true, // To allow collapse
                flex: 1,
                bodyStyle: 'background: #999'
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'panel',
                title: 'Bottom panel',
                animCollapse: false,
                collapsible: true, // To allow collapse
                flex: 1,
                bodyStyle: 'background: #999'
            }]
        });
    }
});

这里我们创建一个扩展容器，使用vbox布局垂直设置面板。在initComponent上，此容器会设置现有子面板，以始终保持倒数第二个折叠面板展开。您应该修改算法以满足您的需求。

旁注：在视图容器上设置变量并不理想。应将这些变量移入控制器。

Answer 2

我根据Ext.resizer.Splitter代码编写了组件。它允许用单个分离器折叠两个面板。

解决方案是abit raw，您可以在this fiddle中查看。

Answer 3

在ExtJ中有 documentation 。

您可以在容器内使用。在这里，我使用可折叠面板创建了一个演示。

希望它能帮助您解决问题。 spliter

detailedItem

ExtJS 4两个带有分离器的可折叠面板

3 个答案: