Zacznijmy od opisu obsługi zdarzeń w elementach DOM.
Obsługa zdarzeń węzła DOM
Przede wszystkim nie chciałbyś pracować bezpośrednio z węzłem DOM. Zamiast tego prawdopodobnie chciałbyś użyć Ext.Elementinterfejsu. W celu przypisania obsługi zdarzeń Element.addListeneri Element.on(są one równoważne) zostały utworzone. Na przykład, jeśli mamy html:
<div id="test_node"></div>
i chcemy dodać clickobsługę zdarzeń.
Pobierzmy Element:
var el = Ext.get('test_node');
Teraz sprawdźmy w dokumentach clickwydarzenie. Jego program obsługi może mieć trzy parametry:
kliknij (Ext.EventObject e, HTMLElement t, Object eOpts)
Znając to wszystko możemy przypisać handlerowi:
el.on( 'click' , function(e, t, eOpts){
});
Obsługa zdarzeń widżetów
Obsługa zdarzeń widżetów jest bardzo podobna do obsługi zdarzeń w węzłach DOM.
Po pierwsze, obsługa zdarzeń widżetów jest realizowana poprzez wykorzystanie Ext.util.Observablemixin. Aby poprawnie obsługiwać zdarzenia, twój widget musi zawierać się Ext.util.Observablejako mixin. Wszystkie wbudowane widżety (takie jak Panel, Form, Drzewo, Siatka, ...) mają Ext.util.Observabledomyślnie domieszkę.
W przypadku widżetów istnieją dwa sposoby przypisywania programów obsługi. Pierwszy - to użycie na metodzie (lub addListener). Na przykład stwórzmy Buttonwidget i przypiszmy clickdo niego zdarzenie. Przede wszystkim powinieneś sprawdzić dokumentację zdarzenia pod kątem argumentów handlera:
kliknij (Przycisk Ext. przycisk this, Event e, Object eOpts)
Teraz użyjmy on:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
console.log(btn, e, eOpts);
});
Drugim sposobem jest użycie konfiguracji słuchaczy widżetu :
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
listeners : {
click: function(btn, e, eOpts) {
console.log(btn, e, eOpts);
}
}
});
Zauważ, że Buttonwidget to specjalny rodzaj widżetów. Zdarzenie Click można przypisać do tego widżetu za pomocą handlerconfig:
var myButton = Ext.create('Ext.button.Button', {
text: 'Test button',
handler : function(btn, e, eOpts) {
console.log(btn, e, eOpts);
}
});
Odpalanie zdarzeń niestandardowych
Przede wszystkim musisz zarejestrować zdarzenie metodą addEvents :
myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', );
Korzystanie z tej addEventsmetody jest opcjonalne. Komentarze do tej metody mówią, że nie ma potrzeby korzystania z tej metody, ale zapewnia miejsce na dokumentację wydarzeń.
Aby uruchomić zdarzenie, użyj metody fireEvent :
myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, );
arg1, arg2, arg3, /* ... */zostaną przekazane do programu obsługi. Teraz możemy obsłużyć Twoje wydarzenie:
myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
console.log(arg1, arg2, arg3, );
});
Warto wspomnieć, że najlepszym miejscem do wstawienia wywołania metody addEvents jest metoda widżetu initComponentpodczas definiowania nowego widżetu:
Ext.define('MyCustomButton', {
extend: 'Ext.button.Button',
initComponent: function(){
this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', );
this.callParent(arguments);
}
});
var myButton = Ext.create('MyCustomButton', { });
Zapobieganie bulgotaniu wydarzeń
Aby zapobiec bulgotaniu, możesz return falselub użyć Ext.EventObject.preventDefault(). Aby zapobiec używaniu domyślnej akcji przeglądarki Ext.EventObject.stopPropagation().
Na przykład przypiszmy obsługę zdarzenia kliknięcia do naszego przycisku. A jeśli nie został kliknięty lewy przycisk, zablokuj domyślną akcję przeglądarki:
myButton.on('click', function(btn, e){
if (e.button !== 0)
e.preventDefault();
});