FIDDLE

Question

我使用的是Extjs 6.5.3。

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

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

以下是不允许多个面板同时打开的示例，即使添加了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创建了一个演示。

CODE SNIPPET

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

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

1 个答案:

FIDDLE