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

【问题标题】：ExtJs 6-7 - Accordion panel click event on an itemExtJs 6-7 - 项目上的手风琴面板点击事件
【发布时间】：2022-08-20 01:14:27
【问题描述】：

如何捕捉手风琴面板中项目的点击事件？我尝试了文档中的不同选项，但没有任何效果

您是指展开或折叠面板的手风琴面板子面板标题，还是展开面板中的项目？
i.stack.imgur.com/YmrXT.png
您可以在面板展开或折叠时收听事件，如果它确实解决了您的问题，我可以在答案中发布示例。

标签： extjs

【解决方案1】：

你有两个选择：

将 expand / collapse 监听器添加到手风琴面板内的面板组件中，这更容易，但它并不是完全监听点击事件，而是监听面板的状态。如果您使用动画，它也会延迟一点，因为这些事件是在动画完成时触发的。

将click 监听器添加到面板的标题中。这更准确地说是您所要求的，但有一个缺点：这样您会覆盖默认的展开/折叠行为，并且您需要注意展开/折叠面板。

以下代码为您提供了这两个示例，在Ext JS 7.5.1 经典材质.另请参阅fiddle here，您可以在控制台中跟踪事件的触发。

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

【讨论】：

我有一个现代版本的煎茶，你在听众中的建议不起作用
Ext.define('Admin.view.pages.Accordion', { xtype:'mainAccordion', extend: 'Ext.panel.Accordion', id:'panelAccordion', defaults: { titleCollapse: true, xtype: 'panel', bodyPadding: 2 }, openable: 1, items: items, listeners: { expand: function (panel, eOpts) { console.log(panel.getTitle() + ' expanded.'); }, collapse: function (panel, eOpts) { console.log(panel.getTitle() + ' collapsed.'); } } });

【解决方案2】：

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

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

                }

【讨论】：