ExtJS Events События

Для событий связанных с DOM в ExtJS предусмотрен метод аналогичный 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.

Этот же метод позволяет вытащить информацию о самом событиии, источнике события и изменить ход события.
В примере ниже обработчику события передаются два параметра.
Один - 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});

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

// привязка событий myEvent1,myEvent2 к какому-нибудь объекту (компоненту) obj
obj.addEvents('myEvent1', 'myEvent2');

// описание обработчика события
function myEvent1Listener(event, target, {params}){…}

// вызов события из объекта (компонента) obj
this.fireEvent('myEvent', this,  {params});