Для событий связанных с 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});
Пример для обработки клика представлен ниже:
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});
