创建自定义布局或配置，如手风琴，这将使所有面板可折叠

Question

我正在使用 Extjs 6.5.3。

我想创建自定义布局或配置，这样当我在文件中使用它时，所有面板都可以折叠。

我知道 ExtJS 有 Accordion 布局，使用它我们可以使所有面板可折叠，但即使我们添加 multi: true 配置，同时打开多个面板时，Accordion 布局也会出现问题。它不允许同时展开和关闭多个面板。

下面是不允许同时打开多个面板的例子，即使添加了multi:true

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        multi: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    }, {
        title: 'Panel 2',
        html: 'Panel content!'
    }, {
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
});

我也知道通过使用 vbox 布局，我们可以让面板像下面那样折叠

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px',
        collapsible: true
    },
    layout: {
        // layout-specific configs go here
        type: 'vbox'
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    }, {
        title: 'Panel 2',
        html: 'Panel content!'
    }, {
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
});

但我想将它作为配置或自定义布局，以便我可以在任何地方重复使用它。为此，我没有找到任何方法。

Answer 1

为此，您可以使用Accordion 布局轻松实现。您需要使用 Ext.override 覆盖手风琴布局 onBeforeComponentCollapse 方法。

在退出onBeforeComponentCollapse 方法的源文件中，他们采用next() 或prev() 来扩展至少一个组件。您只需要像这样添加一个自定义配置atleastOneExpanded:false

layout: {
    type: 'accordion',
    multi: true,
    atleastOneExpanded: false
}

在Ext.override 你需要检查这个条件

Ext.override(Ext.layout.container.Accordion, {
     onBeforeComponentCollapse: function(comp) {
         var me = this,
             owner = me.owner,
             toExpand,
             expanded,
             previousValue;

         if (me.owner.items.getCount() === 1) {
             // do not allow collapse if there is only one item
             return false;
         }

         if (!me.processing) {
             me.processing = true;
             previousValue = owner.deferLayouts;
             owner.deferLayouts = true;
             toExpand = comp.next() || comp.prev();

             //IF atleastOneExpanded config is true then one panel will always expand.
             if (me.atleastOneExpanded) {
                 // If we are allowing multi, and the "toCollapse" component is NOT the only expanded Component,
                 // then ask the box layout to collapse it to its header.
                 if (me.multi) {
                     expanded = me.getExpanded();

                     // If the collapsing Panel is the only expanded one, expand the following Component.
                     // All this is handling fill: true, so there must be at least one expanded,
                     if (expanded.length === 1) {
                         toExpand.expand();
                     }

                 } else if (toExpand) {
                     toExpand.expand();
                 }
             }
             owner.deferLayouts = previousValue;
             me.processing = false;
         }
     }
 });

FIDDLE

在上面的小提琴中，我使用Ext.override 创建了一个演示。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.create('Ext.panel.Panel', {
            title: 'Accordion Layout',

            defaults: {
                bodyStyle: 'padding:15px'
            },

            layout: {
                type: 'accordion',
                multi: true,
                atleastOneExpanded: false
            },

            items: [{
                title: 'Panel 1',
                html: 'Panel content!'
            }, {
                title: 'Panel 2',
                html: 'Panel content!'
            }, {
                title: 'Panel 3',
                html: 'Panel content!'
            }],

            renderTo: Ext.getBody()
        });
    }
});