如何在ExtJS自定义面板上统一监听所有按钮点击事件？

当然可以通过面板实例this.PAN_Button统一监听所有按钮的点击事件，不用逐个绑定，下面给你两种实用的实现方式：

方式一：利用事件冒泡机制 #

ExtJS组件的事件默认会向上冒泡到父容器，你可以直接在面板上监听click事件，通过事件对象判断触发点击的按钮：

this.PAN_Button.on('click', function(event, target) {
    // 获取触发点击的按钮组件实例
    const btn = Ext.getCmp(target.id);
    if (!btn) return;
    
    // 根据按钮ID区分处理逻辑
    switch(btn.getId()) {
        case 'BTN_New':
            // 执行新增操作逻辑
            break;
        case 'BTN_Modify':
            // 执行修改操作逻辑
            break;
        // 其他按钮的处理分支
    }
});

注意：如果按钮是动态生成的，要确保这段监听代码在按钮渲染完成后执行，否则会漏掉对动态按钮的监听。

方式二：使用delegate委托监听 #

这种方式更适合动态生成按钮的场景，直接在面板的监听配置里指定委托选择器，自动匹配所有现有和后续添加的按钮：

this.PAN_Button = Ext.create('TEST.TPL_BTN_Table', {
    listeners: {
        click: {
            delegate: 'button', // 匹配面板内所有button组件
            fn: function(event, btn) {
                // btn就是触发点击的按钮实例
                switch(btn.getId()) {
                    case 'BTN_New':
                        // 新增操作逻辑
                        break;
                    case 'BTN_Modify':
                        // 修改操作逻辑
                        break;
                }
            }
        }
    }
});

另外关于你之前用fireEvent没监听到自定义事件的问题，大概率是事件触发和监听的时机不匹配（比如监听代码写在按钮渲染之后），或者事件名称拼写错误。如果坚持用自定义事件，要确保在按钮的原生click事件里正确触发自定义事件，且面板在按钮渲染前就完成了自定义事件的监听。

内容的提问来源于stack exchange，提问作者Charles Candy