CODEWITHSUNDEEP
extjs
webpuper
webpuper

Reputation: 19

ExtJs 6-7 - Accordion panel click event on an item

How to catch the click event on an item in the accordion panel? I tried different options from the documentation, but nothing works

Upvotes: 0

Views: 313

Answers (2)

webpuper
webpuper

Reputation: 19

In the end, I solved the problem myself. For the modern interface, the default panel is set, and listeners must be defined in it

defaults: {
                titleCollapse: true,
                xtype: 'panel',
                animate: true,
                bodyPadding: 2,
                listeners: {
                    expand: function (panel, eOpts) {
                        console.log(panel.getTitle() + ' expanded.');
                    },
                    collapse: function (panel, eOpts) {
                        console.log(panel.getTitle() + ' collapsed.');
                    }

                }

Upvotes: 0

Peter Koltai
Peter Koltai

Reputation: 9734

You have two options:

  1. Add expand / collapse listeners to the panel components inside the accordion panel, this is easier, but it is not exactly listening to the click event, rather to the state of the panel. It is also delayed a little bit if you use animation, because these events are fired when the animation is completed.

  2. Add click listener to the panel's header. This is more precisely what you asked for, but there is a drawback: this way you override the default expand / collapse behaviour, and you need to take care of expanding / collapsing the panel.

The following code provides you with both examples, in Ext JS 7.5.1 Classic Material. Also see fiddle here, you can track the firing of events in console.

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Accordion Panel',
            width: 400,
            height: 400,
            layout: {
                type: 'accordion',
                titleCollapse: true,
                animate: true,
                multi: true //false
            },
            defaults: {
                collapsed: true,
                // listen to click event on header
                header: {
                    listeners: {
                        click: function (header, e, eOpts ) {
                            const panel = header.up('panel');
                            console.log (panel.getTitle() + ' header clicked.');
                            if (panel.collapsed) {
                                panel.expand();
                            }
                            else {
                                panel.collapse();
                            }
                        }
                    }
                },
                // listen to panel expand / collapse in accordion panel
                listeners: {
                    expand: function (panel, eOpts) {
                        console.log(panel.getTitle() + ' expanded.');
                    },
                    collapse: function (panel, eOpts) {
                        console.log(panel.getTitle() + ' collapsed.');
                    }
                }
            },
            items: [{
                title: 'Panel 1',
                html: 'Content 1',
            }, {
                title: 'Panel 2',
                html: 'Content 2',
            }, {
                title: 'Panel 3',
                html: 'Content 3',
            }],
            renderTo: Ext.getBody(),
        });
    }
});

Upvotes: 1

Related Questions