ExtJs 6-7手风琴面板单击项目上的事件

Question

如何捕捉手风琴面板中项目的单击事件？我尝试了与文档不同的选项，但都没有用。

Answer 1

最后，我自己解决了这个问题。对于现代接口，将设置默认面板，并且必须在其中定义侦听器。

​

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

                }

​

Answer 2

你有两个选择：

1. 将expand / collapse侦听器添加到手风琴面板中的面板组件中，这样会更容易，但它并不是确切地侦听单击事件，而是侦听面板的状态。如果使用动画，也会延迟一些，因为这些事件是在动画完成时触发的。
2. 将click侦听器添加到面板的标题中。这正是您所要求的，但是有一个缺点:这样您就可以覆盖默认的展开/折叠行为，并且需要处理展开/折叠面板。

下面的代码为您提供了两个示例，在ExtJS7.5.1经典材料中。请参阅小提琴在这里，您可以跟踪控制台中事件的触发。

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