Extjs accordion items how can i make an open item not to close again when clicking on it

Question

I was wondering if it's possible to not to allow the user to close the item again when it's open, meaning to let it close only when i click on another item in the accordion. hope it's clear enough.

I'm adding the code:

Ext.define('application.view.SystemHealth', {
extend: 'Ext.Container',
alias: 'widget.globalSynchronization',
requires: ['infra.view.views.BoxHeader',
    'application.view.SystemStatusHeader',
    'application.model.SystemHealth',
    'application.store.SystemHealth',
    'infra.utils.pvs.SyncJobRunningStep',
    'application.view.CostCalculation',
    'application.view.SystemStatusHeader',
    'application.view.DataCollector',
    'application.view.PublicCloudConnection',
    'Ext.layout.container.Accordion'

],

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

},
header: false,
cls: ['global-synchronization'],
syncJobStatus: null,



initComponent: function() {
        var me = this;

        me.store =  Ext.create('itfm.application.store.SystemHealth');
        me.store.load({scope: me, callback: me.onLoadDone});


    Ext.apply(me, {
        items: [
            {
                xtype: 'boxHeader',
                width: '100%',
                title: itfm.application.T.GlobalSynchronizationTitle

            },
            {
                xtype: 'label',
                width: '90%',
                html: itfm.application.T.GlobalSynchronizationDescription,
                margin: "0 0 30 10"
            }
        ]
    });

    me.callParent(arguments);

},

onLoadDone: function(records, operation, success){
    var me =this;
    var accordionItemsMargin =  '0 0 30 0';
    me.accordion = Ext.create('Ext.panel.Panel', {


        margin: "0 0 30 10",

        defaults:[{
            layout:'fit',
            height:'100%',
            width:'100%'
        }] ,
        layout: {
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true,
            fill : true,
            collapseFirst :true
        },
        items: [
            {
                height: 180,
                xtype: 'dataCollector',
                autoScroll:true,
                margins: accordionItemsMargin,
                store: records[0].dcModule()
            }
            ,
            {
                xtype: 'costCalculation',
                margins: accordionItemsMargin,
                store: records[0].ccModule()
            },
            {
                xtype: 'publicCloudConnection',
                margins: accordionItemsMargin,
                store: records[0].pcModule()
            }

        ]

    });

    me.add( me.accordion);

}

});

thanks for the help

Answer 1

I was able to override the accordion with the following

Ext.define('itfm.application.view.SystemHealthAccordion', {
extend: 'Ext.layout.container.Accordion',
alias: ['layout.systemHealthAccordion'] ,

constructor: function() {

    var me = this;
    me.callParent(arguments);

},
onComponentExpand: function(comp) {
    var me = this;
    me.callParent(arguments);
    var button = comp.down('tool');
    button.setDisabled(true);

},
onComponentCollapse: function(comp) {
    var me = this;
    me.callParent(arguments);
    var button = comp.down('tool');
    button.setDisabled(false);
}

});

inside the class of the first item of the accordion, there is a need to do the following:

me.on('boxready', me.disableTools);
},
// disable the click on the item in case it's open
disableTools: function(){
    var me = this;
    var button = me.getHeader().down('tool');
    button.setDisabled(true);
}

so when the first item is open it will have the same behaviour

Answer 2

What you want is that nothing happens when the user click on the currently expanded panel, instead of collapsing and expanding the next one, is that right?

Unfortunately, there's no built-in option for that... If you really want it, you'll have to override Ext.layout.container.Accordion and implement it yourself.

Edit

In fact most of the collapsing/expanding code lies in the Ext.panel.Panel class.

This simple override seems to be enough to do what you want. Apparently this method is used only for collapse listeners, so it shouldn't have any adverse effect (unless the method is also used somewhere in your code...).

Ext.define('Ext.ux.Panel.JQueryStyleAccordion', {
    override: 'Ext.panel.Panel'
    ,toggleCollapse: function() {
        if (this.collapsed || this.floatedFromCollapse) {
            this.callParent();
        }
    }
});

See this fiddle.