Создайте пользовательский макет или конфигурацию, например, аккордеон, который сделает все панели разборными - PullRequest
Новая
       36

Создайте пользовательский макет или конфигурацию, например, аккордеон, который сделает все панели разборными

0 голосов
/ 08 июня 2018

Я использую Extjs 6.5.3.

Я хочу создать собственный макет или конфигурацию, чтобы при использовании этого в моем файле все панели становились разборными.

Я знаю, что в ExtJS есть макет 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()
});

IТакже мы знаем, что используя макет 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()
});

Но я хочу использовать его в качестве конфигурации или пользовательского макета, чтобы я мог использовать его в любом месте.Для этого я не нахожу никакой возможности.

1 Ответ

0 голосов
/ 08 июня 2018

Для этого вы можете легко реализовать используя макет Accordion.Вам необходимо переопределить метод аккордеона onBeforeComponentCollapse, используя Ext.override.

В исходном файле при выходе из метода 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.

КОД 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()
        });
    }
});
...