Обработчики событий в Ext JS 6

Событием может быть действие пользователя, ответ на AJAX-запрос и т,д.

Обработчик можно добавить при создании объекта или позже. Следующий код при создании объекта добавляет обработчик на клик:

Ext.create('Ext.Button', {
 renderTo: Ext.getBody(),
 listeners: {
 click: function() {
 Ext.Msg.alert('Button clicked!');
 }
 }
});

Можно добавлять обработчики к нескольким событиям:

Ext.create('Ext.Button', {
 renderTo: Ext.getBody(),
 listeners: {
 mouseout: function() {
 //Do something
 },
 click: function() {
 // Do something
 }
 }
});

Также можно добавлять обработчики уже после того как экземпляр создан:

var button = Ext.create('Ext.Button');
button.on('click', function() {
 //Do something
});

Можно добавлять несколько обработчиков на уже созданный экземпляр:

var button = Ext.create('Ext.Button');
button.on({
 mouseover: function() {
 //Do something
 },
 mouseover: function() {
 //Do something
 }
});

Для того чтобы удалить обработчик нужна ссылка на функцию. Нельзя удалить обработчик представленный анонимной функцией.

var HandleClick= function() {
 Ext.Msg.alert('My button clicked!');
}
Ext.create('Ext.Button', {
 listeners: {
 click: HandleClick
 }
});
button.un('click', HandleClick);

Можно добавлять обработчики к DOM-элементам. Например, для такого элемента <div id="mydiv"></div> можно добавить обработчик:

var div = Ext.get('mydiv');
div.on('click', function(e, t, eOpts) {
 // Do something
});