Ext JS 4.1: добавить прослушиватель события click в headerCheckbox

Question

У меня есть сетка с выбираемыми строками. Вы можете найти мой код в JS Bin.

Как добавить прослушиватель событий щелчка в заголовок столбца, содержащий флажок?

Этот код не работает:

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

Добавление слушателя к флажку в порядке:

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

Но я хочу, чтобы весь заголовок, а не только флажок, прослушивал события щелчка.:'(

Как мне этого добиться? Соответственно, почему мой код не работает?

Answer 1

Хитрость заключается в добавлении прослушивателя событий к элементу headerCheckbox, а не к самому компоненту.

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

Смотри JS Bin.

Спасибо @scebotari66 за указание в правильном направлении!

Answer 2

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/