Давайте начнем с описания обработки событий элементов DOM.
Обработка событий узла DOM
Прежде всего вы не захотите работать с узлом DOM напрямую.Вместо этого вы, вероятно, захотите использовать интерфейс Ext.Element.Для назначения обработчиков событий были созданы Element.addListener и Element.on (они эквивалентны).Так, например, если у нас есть html:
<div id="test_node"></div>
и мы хотим добавить click обработчик событий.
Давайте восстановим Element:
var el = Ext.get('test_node');
Теперь давайте проверимдокументы для click события.Его обработчик может иметь три параметра:
click (Ext.EventObject e, HTMLElement t, Object eOpts)
Зная все эти вещи, мы можем назначить обработчик:
// event name event handler
el.on( 'click' , function(e, t, eOpts){
// handling event here
});
Обработка событий виджетов
Обработка событий виджетов очень похожа на обработку событий узлов DOM.
Прежде всего, обработка событий виджетов реализована с использованием Ext.util.Observable mixin.Для правильной обработки событий ваш виджет должен связываться с Ext.util.Observable как миксин.Все встроенные виджеты (такие как Panel, Form, Tree, Grid, ...) по умолчанию имеют Ext.util.Observable как миксин.
Для виджетов есть два способа назначения обработчиков.Первый - использовать метод на (или addListener).Например, создадим виджет Button и назначим ему событие click.Прежде всего вы должны проверить документы событий на наличие аргументов обработчика:
click (Ext.button. Кнопка this, Event e, Object eOpts)
Теперь давайте используем on:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
});
Второй способ - использовать listeners config виджета:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
listeners : {
click: function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
}
});
Обратите внимание, что виджет Button - это особый вид виджетов.Событие клика может быть назначено этому виджету с помощью handler config:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
handler : function(btn, e, eOpts) {
// event handling here
console.log(btn, e, eOpts);
}
});
Настраиваемые события
Прежде всего вам необходимо зарегистрировать событие с помощью addEvents метод:
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
Использование метода addEvents необязательно.В комментариях к этому методу говорится, что нет необходимости использовать этот метод, но он предоставляет место для документации событий.
Для запуска вашего события используйте fireEvent метод:
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);
arg1, arg2, arg3, /* ... */ будет передано в обработчик.Теперь мы можем обработать ваше событие:
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
// event handling here
console.log(arg1, arg2, arg3, /* ... */);
});
Стоит отметить, что лучшим местом для вставки вызова метода addEvents является метод initComponent виджета при определении нового виджета:
Ext.define('MyCustomButton', {
extend: 'Ext.button.Button',
// ... other configs,
initComponent: function(){
this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
// ...
this.callParent(arguments);
}
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });
Предотвращение пузырей события
Чтобы предотвратить пузыри, вы можете return false или использовать Ext.EventObject.preventDefault().Чтобы предотвратить действие браузера по умолчанию, используйте Ext.EventObject.stopPropagation().
Например, давайте назначим обработчик события щелчка для нашей кнопки.А если не нажата левая кнопка, запретите действие браузера по умолчанию:
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});