Question

我有一个可选行的网格。您可以在JS Bin找到我的代码。

如何将click事件侦听器添加到包含复选框的列标题？

此代码无效：

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

向复选框添加监听器是可以的：

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

但是我想要整个标题，而不仅仅是复选框，来监听点击事件。：＆＃39;（

我如何实现这一目标？我的代码分别为什么会失败？

Answer 1

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

此外，列没有单击事件，因此您在其元素上设置了单击侦听器。

这就是说，这是代码：

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

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

工作小提琴：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添加click事件监听器

2 个答案: