Обробка подій елементів та компонентів у ExtJS
Велике значення у Ext JS має модель подій. За допомогою подій ми можемо обробляти введення користувача і контролювати хід виконання програми.
Для того, щоб повісити обробник події на елемент, нам треба використовувати метод on класу Ext.Element, який є псевдонімом методу javascript addListener.
Отже, додамо для деякого елемента
Спочатку функцією Ext.get ми отримуємо потрібний елемент з id, потім функції element.on . Перший аргумент цієї функції - сама подія, яку ми прослуховуємо. Другий аргумент – функція оброблювача цієї події. У разі ми використовуємо анонімну функцію. Третій параметр позначає область дії обробника (у разі це вікно браузера).
Ми також можемо передати в функцію on обробник одразу для кількох подій елемента:
Щоб додати елемента обробники відразу для кількох подій, ми створюємо анонімний об'єкт і всередині нього оголошуємо пари ключ-значення, ключем є подія, а значенням - функція обробника цієї події. Останній параметр – scope – вказує на область видимості.
Обробники подій компонентів
Для додавання обробників подій у компонентів можна використовувати параметрlisteners, який, як і функція on, приймає як анонімний об'єкт набір пар - подія та функція його обробника:
Тут ми створюємо кнопку і додаємо їй обробник події click. Після натискання на кнопку виводимо повідомлення.
Делегація подій
Делегація подій дозволяє вішати обробник події на батьківський елемент, події оброблятимуться на дочірніх елементах, котрим вони були делеговані. Ця техніка дуже дієва, тому що дозволяєзамість прикріплення оброблювачів до кожного окремого елементу, обробляти події відразу кількох елементів.
Визначимо, наприклад, наступний код розмітки html:
Додамо для елементів із класом text обробник події click:
За допомогою параметраdelegate ми прикріплюємо обробник події click до тих елементів, у яких . Використовуючи переданий як аргумент в обробник параметр target, отримуємо елемент, на якому зроблено натискання.
Технічно при делегуванні подій відбувається перевірка елемента, на якому зроблено подію. Так, ми могли б опустити параметр delegate і за допомогою методу getTarget об'єкта Ext.EventObject перевіряти об'єкт події:
Комбінуючи обидва підходи, можна створити можливість вибору ходу програми в залежності від того, для якого елемента виникла подія. Наприклад, визначимо на веб-сторінці просте меню:
Тепер залежно від того, який пункт меню було натиснуто, будемо робити ті чи інші дії:
За допомогою методу getTarget з'ясовуємо, над яким пунктом меню натиснули виводимо певне повідомлення.