Ext JS 4.1: Add click event listener to headerCheckbox

Question

I have a grid with selectable rows. You can find my code at JS Bin.

How can I add a click event listener to the column header containing the checkbox?

This code doesn't work:

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

Adding a listener to the checkbox is okay:

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

But I want the whole header, not only the checkbox, to listen for click events. :'(

How do I achieve this? Respectively, why does my code fail?

Answer 1

The trick is to add the event listener to headerCheckbox's element, not the component itself.

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

See JS Bin.

Thx to @scebotari66 for pointing me in the right direction!

Answer 2

this.columns[0] seems to reference to your "1st column". Actually this.columns.length returns 2. Here are stored the references to the columns that you've declared in the columns config. To get a reference to the checkbox column you'll have to dig into this.columnManager.columns.

Also, the columns does not have a click event, so you set a click listener on their element.

This being said, here is the code:

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

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

And the working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/262i