Недавно я начал изучать ExtJS и не понимаю, как обрабатывать события. У меня нет опыта работы с предыдущими версиями ExtJS.
Прочитав различные руководства, руководства и страницы документации, я понял, как им пользоваться, но не понимаю, как это работает. Я нашел несколько руководств для более старых версий ExtJS, но не уверен, насколько они применимы в ExtJS 4.
Я специально ищу "последнее слово" в таких вещах, как
- какие аргументы передаются функции обработки событий? Есть ли стандартный набор аргументов, которые всегда передаются?
- как определить пользовательские события для пользовательских компонентов, которые мы пишем? как мы можем запустить это настраиваемое событие?
- влияет ли возвращаемое значение (истина / ложь) на то, как всплывает событие? Если нет, как мы можем контролировать всплытие событий изнутри или вне обработчика событий?
- есть ли стандартный способ регистрации слушателей событий? (До сих пор я встречал два разных способа, и я не уверен, почему использовался каждый метод).
Например, этот вопрос заставляет меня поверить, что обработчик событий может получать довольно много аргументов. Я видел другие руководства, где у обработчика всего два аргумента. Какие изменения?
javascript
extjs
event-handling
extjs4
jrharshath
источник
источник
Ответы:
Начнем с описания обработки событий элементов DOM.
Обработка событий узла DOM
Прежде всего, вы не захотите напрямую работать с узлом DOM. Вместо этого вы, вероятно, захотите использовать
Ext.Element
интерфейс. С целью назначения обработчиков событийElement.addListener
иElement.on
(они эквивалентны) были созданы. Так, например, если у нас есть html:и мы хотим добавить
click
обработчик событий.Получим
Element
:Теперь давайте проверим документы на предмет
click
события. Его обработчик может иметь три параметра:Зная все это, мы можем назначить обработчик:
Обработка событий виджетов
Обработка событий виджетов очень похожа на обработку событий узлов DOM.
Прежде всего, обработка событий виджетов осуществляется с помощью
Ext.util.Observable
миксина. Чтобы правильно обрабатывать события, ваш виджет должен иметьExt.util.Observable
вид миксина. Все встроенные виджеты (например, панель, форма, дерево, сетка, ...) имеютExt.util.Observable
по умолчанию используются в качестве миксина.Для виджетов есть два способа назначения обработчиков. Первый - использовать по методу (или
addListener
). Например, создадимButton
виджет и назначим емуclick
событие. Прежде всего, вы должны проверить документацию события на предмет аргументов обработчика:Теперь воспользуемся
on
:Второй способ - использовать конфигурацию слушателей виджета :
Обратите внимание, что
Button
виджет - это особый вид виджетов. Событие клика можно назначить этому виджету с помощьюhandler
config:Запуск пользовательских событий
Прежде всего, вам нужно зарегистрировать событие с помощью метода addEvents :
Используя
addEvents
метода необязательно. В комментариях к этому методу говорится, что использовать этот метод нет необходимости, но он предоставляет место для документации событий.Чтобы запустить событие, используйте метод fireEvent :
arg1, arg2, arg3, /* ... */
будет передан обработчику. Теперь мы можем обработать ваше событие:Стоит отметить, что лучшее место для вставки вызова метода addEvents - это
initComponent
метод виджета, когда вы определяете новый виджет:Предотвращение всплытия событий
Для предотвращения образования пузырей можно
return false
или использоватьExt.EventObject.preventDefault()
. Чтобы предотвратить действия браузера по умолчанию, используйтеExt.EventObject.stopPropagation()
.Например, назначим нашей кнопке обработчик события нажатия. И если не была нажата левая кнопка, предотвратить действие браузера по умолчанию:
источник
Акции по стрельбе
Как заставить контроллеры разговаривать друг с другом ...
В дополнение к очень отличному ответу выше я хочу упомянуть события в масштабе всего приложения, которые могут быть очень полезны в настройке MVC для обеспечения связи между контроллерами. (Extjs4.1)
Допустим, у нас есть контроллерная станция (примеры Sencha MVC) с полем выбора:
Когда поле выбора запускает событие изменения, функция
onStationSelect
запускается.Внутри этой функции мы видим:
Это создает и запускает событие для всего приложения, которое мы можем прослушивать с любого другого контроллера.
Таким образом, в другом контроллере теперь мы можем узнать, когда было изменено поле выбора станции. Это делается путем прослушивания
this.application.on
следующего:Если поле выбора было изменено, теперь мы также запускаем функцию
onStationStart
в контроллереSong
...Из документов Sencha:
События приложения чрезвычайно полезны для событий, которые имеют много контроллеров. Вместо того, чтобы прослушивать одно и то же событие представления в каждом из этих контроллеров, только один контроллер прослушивает событие представления и запускает событие уровня приложения, которое могут прослушивать другие. Это также позволяет контроллерам обмениваться данными друг с другом, не зная о существовании друг друга или не завися от него.
В моем случае: щелчок по узлу дерева для обновления данных на панели сетки.
Обновление 2016 благодаря @ gm2008 из комментариев ниже:
Что касается запуска пользовательских событий для всего приложения, теперь после публикации ExtJS V5.1 появился новый метод , который использует
Ext.GlobalEvents
.Когда вы запускаете события, вы можете позвонить:
Ext.GlobalEvents.fireEvent('custom_event');
Когда вы регистрируете обработчик события, вы вызываете:
Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);
Этот метод не ограничивается контроллерами. Любой компонент может обрабатывать настраиваемое событие, помещая объект компонента в качестве области входного параметра.
Найдено в Sencha Docs: MVC Part 2
источник
Ext.GlobalEvents.fireEvent('custom_event');
Когда вы регистрируете обработчик события, вы вызываетеExt.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope};
Here is a fiddle . Этот метод не ограничивается контроллерами. Любой компонент может обрабатывать настраиваемое событие, помещая объект компонента в качестве входного параметраscope
. Вопрос следует снова открыть.Еще одна хитрость для слушателей событий контроллера.
Вы можете использовать подстановочные знаки для отслеживания события из любого компонента:
источник
Просто хотел добавить пару пенсов к превосходным ответам, приведенным выше: если вы работаете над Extjs 4.1 и у вас нет общих событий приложения, но они нужны, я использовал очень простой метод, который может помочь: простой объект, расширяющий Observable, и определите любые события приложения, которые могут вам понадобиться. Затем вы можете запускать эти события из любого места вашего приложения, включая фактический элемент html dom, и прослушивать их из любого компонента, передавая необходимые элементы из этого компонента.
Затем вы можете из любого другого компонента:
И запускайте их из любого компонента или элемента dom:
источник
Еще две вещи, которые мне показалось полезным узнать, даже если они не являются частью вопроса.
Вы можете использовать этот
relayEvents
метод, чтобы сообщить компоненту, что он должен прослушивать определенные события другого компонента, а затем запускать их снова, как если бы они исходили от первого компонента. В документации по API приведен пример сетки, передающейload
событие магазина . Это очень удобно при написании пользовательских компонентов, которые инкапсулируют несколько подкомпонентов.И наоборот, то есть передача событий, полученных инкапсулирующим компонентом,
mycmp
одному из его подкомпонентовsubcmp
, может быть выполнена следующим образомисточник