.. / 15. События в ExtJS (немного об ООП)

1. События DOM

Для событий связанных с DOM предусмотрен метод аналогичный jQuery.bind. Пример для обработки клика ниже:

Ext.onReady(function(){
var ex1=Ext.get(«ex1»); ex1.on(«click»,function(){alert('click');})
// или так:
Ext.EventManager.addListener(«ex1», 'click',function(){ alert('click #2')});
});

Поскольку в примере введены два обработчика события они отработаются оба, точно так же как и в jQuery

#ex1 click me

Этот же метод позволяет вытащить информацию о самом событиии, источнике события и изменить ход события.
В примере ниже обработчику события передаются два параметра. Один - EventObject, а другой - DOM-объект источника события. В примере я ввел ненужные в данном случае дополнительные операции по предотвращению всплывание события (stopPropagation), выполнения дефотлной операции клика (preventDefault), например при клике по ссылке можно предотвратить переход по этой ссылке и др.

function handleClick(event, target){  // обработчик события
event.preventDefault();  // предотвращает событие навешанное по дефолту 
event.stopPropagation(); // предотвращает всплывание
event.stopEvent(); // это лишнее, оно предотвращает и всплывание  и дефолт  
var s= 'Target: '+target.innerHTML       // вытаскиваюя какую-то инфо о событии                         
        +'XY: ' + event.getPageX() +':' + event.getPageY();                       
        alert(s)         
}
var ex2 = Ext.get(«ex2»);  // ссылка на Ext.Element ex2.on(«click»,      // событие
     handleClick     // обработчик события
        );

Есть еще несколько вариантов форы записи этого метода, например:

el.on(eventName, handler, scope,params);  

eventName - событие (click dblclick mousemove mouseout mouseover mousedown mouseup…)
handler - функция обработччик события
scope - контекст события (по умолчанию this)
params - дополнительные параметры, которые могут в частности заменять функции stopEvent, preventDefault и т.д.

Четвертым параметром передается объект, в котором ожно передать дополнительные параметры обработки, например:

ex1.on('click', this.onClick, this, {preventDefault: true});
ex1.on('click', this.onClick, this, {stopEvent: true});
exl.on('click', this.onClick, this, {stopPropagation: true});
// вызывать обработчик через 100 милисекунд
el.on('click', this.onClick, this, {delay: 100});
// не допускать вызова обработчика чаще чем раз в 100 милисекунд
el.on('click', this.onClick, this, {buffer: 100});

#ex2 click me

2. Собственные события

Помимо низкоуровневых событий, привязанных к DOM, ExtJS так же как и большинство других js-фреймворков (см. bind и trigger в jQuery), позволяет создавать собственные события, которые можно при необходимости вызвать программно. Делается это так:

 // привязка событий myEvent1,myEvent2 
 // к какому нибудь объекту (компоненту) obj obj.addEvents( 'myEvent1', 'myEvent2' ); 
.. .. .. .. .. .. .. .. .. ..  
 //  описание обработчика события
 function myEvent1Listener(event, target, {params}){…}
.. .. .. .. .. .. .. .. .. .. 
 // вызов события из объекта (компонента) obj
 this.fireEvent('myEvent', this,  {params});