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

我正在使用ExtJS6.5.3

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

我知道ExtJS有Accordion布局，通过使用它我们可以使所有面板可折叠，但是Accordion布局对于同时打开多个面板有问题，即使我们为同一个面板添加

multi:true

config。它不允许同时展开和关闭多个面板

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

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

---

但是我想把它作为配置或自定义布局，这样我就可以在任何地方重用它。为此，我没有找到任何方法。

为此，您可以使用布局轻松实现。您需要使用重写accordio layout

onBeforeComponentCollapse

方法

在源文件中，他们采用

next（）

或

prev（）

方法在组件崩溃之前退出

onBeforeComponentCollapse

以至少扩展一个组件。您只需要像这样添加一个自定义配置

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

在上面的提琴中，我使用

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

---

非常感谢你回答我的问题N.贾达夫。