Ext JS 4.1：为 headerCheckbox 添加点击事件监听器

Question

我有一个包含可选行的网格。您可以在 JS Bin.

找到我的代码

如何向包含复选框的列 header 添加点击事件侦听器？

此代码无效：

this.columns[0].on('click', function() {
    // Do stuff
});

给复选框添加一个监听器就可以了：

this.columns[0].textEl.on('click', function() {
    // Do stuff
});

但我想要整个 header，而不仅仅是复选框，来监听点击事件。 :'(

我该如何实现？分别为什么我的代码会失败？

Answer 1

this.columns[0] 似乎是指您的“第一栏”。实际上 this.columns.length returns 2. 这里存储了对您在 columns 配置中声明的列的引用。要获得对复选框列的引用，您必须深入研究 this.columnManager.columns.

另外，列没有点击事件，所以你在它们的元素上设置了点击监听器。

话虽如此，这是代码：

listeners: {
    viewready: {
        fn: function () {
            var checkcolumnHeader = this.columnManager.columns[0];

            checkcolumnHeader.getEl().on('click', function () {
                console.log('clicked');
            });
        }
    }
}

工作 fiddle：https://fiddle.sencha.com/#view/editor&fiddle/262i

Answer 2

诀窍是将事件侦听器添加到 headerCheckbox 的元素，而不是组件本身。

this.columns[0].el.on('click', function() {
    // Do stuff
});

参见JS Bin。

感谢@scebotari66 为我指明了正确的方向！

Ext JS 4.1：为 headerCheckbox 添加点击事件监听器

Ext JS 4.1: Add click event listener to headerCheckbox

extjs

extjs4

onclicklistener

gridpanel

columnheader