ExtJS. Обработка событий

Чем хорош ExtJS в обработке событий – по словам разработчиков – фрэймворк нормализует межбраузерные различия. При обучении мне понравилась вот эта презентация.

Какие события обрабатываются наиболее часто?

События мыши

• click — нажатие левой кнопки мыши
• contextmenu — нажатие правой кнопки мыши
• mouseover — наведение мыши
• mousedown и mouseup — нажатие и отжатие мыши
• mousemove — движение мыши

События на элементах управления

• submit — отправка формы
• focus — фокус на элементе

Клавиатурные события

• keydown — нажатие клавиши на клавиатуре
• keyup — отпускание клавиши на клавиатуре

События документа

• DOMContentLoaded — когда HTML загружен и обработан, DOM документа полностью построен и доступен.

События CSS

• transitionend — когда CSS-анимация завершена.

 

Где взять более-менее полный список всех событий?

• Mozilla Event Reference Guide
• W3 Pointer Events
• W3 Touch Events
• W3 DOM 2 Events
• W3 DOM 3 Events

Как добавить | удалить событие Html элементу в ExtJS?

Определяем обработчик события (нам нужна впоследствии ссылка на обработчик события )

Далее…

Обратите внимание, в данном случае мы использовали ссылку на событие, то есть написали myhandler без скобок. А вот если написать myhandler() – то работать будет некорректно.

Также обратите внимание, если использовать безымянную функцию при установке обработчика, то снять её потом будет невозможно.

Способ добавить несколько событий

Пример использования функции с опциями

Как добавить событие компоненту ExtJS?

В коде ниже – создаем кнопку, и “вешаем” на неё событие, с помощью ключевого слова listeners

 Чехарда с классами обработки событий

Вначале был класс Ext.Event.Manager, но впоследствии, начиная с 5 версии ExtJS его отменили с просьбой использовать api класса Ext.dom.Element

Итак, основным методом добавления события является метод “addListener”, и его короткий вариант “on”. А основным методом удаления является removeListener и короткий аналог un

Вот описание из api для методов addListener / on c моими небольшими комментариями

---

addListener( eventName, [fn], [scope], [options], [order] ) : Object

The on method is shorthand for addListener

• eventName : String/Object, собственно это имя события, например ‘click’

  The name of the event to listen for. May also be an object who’s property names are event names.

• fn : Function/String (optional) – это собственно наш обработчик события

  The method the event invokes or the name of the method within the specified scope. Will be called with arguments given to Ext.util.Observable.fireEventplus the options parameter described below.

• scope : Object (optional) – область действия, например this, если опустить этот параметр, то область действия это объект, который инициировал событие.

  The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.

• options : Object (optional) – далее самое интересное – объект опции {опция1, опция2,…}

  An object containing handler configuration.

  Note: The options object will also be passed as the last argument to every event handler.

  • This object may contain any of the following properties:

    • scope : Object – область действия

      The scope (this reference) in which the handler function is executed. If omitted, defaults to the object which fired the event.

    • delay : Number – задержка запуска события

      The number of milliseconds to delay the invocation of the handler after the event fires.

    • single : Boolean – “одноразовость события”

      True to add a handler to handle just the next firing of the event, and then remove itself.

    • buffer : Number

      Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.

    • onFrame : Number

      Causes the handler to be scheduled to run at the next animation frame event. If the event fires again before that time, the handler is not rescheduled – the handler will only be called once when the next animation frame is fired, with the last set of arguments passed.

    • target : Ext.util.Observable

      Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable.

    • element : String – применяется только к компонентам.

      This option is only valid for listeners bound to Components. The name of a Component property which references an element to add a listener to.

      This option is useful during Component construction to add DOM event listeners to elements of Components which will exist only after the Component is rendered.

      For example, to add a click listener to a Panel’s body:

      var panel = new Ext.panel.Panel({

      title: ‘The title’, listeners: { click: this.handlePanelClick, element: ‘body’ } });

      In order to remove listeners attached using the element, you’ll need to reference the element itself as seen below.

      panel.body.un(…)

    • delegate : String (optional) – фильтр “селекторов”

      A simple selector to filter the event target or look for a descendant of the target.

      The “delegate” option is only available on Ext.dom.Element instances (or when attaching a listener to a Ext.dom.Element via a Component using the element option).

      See the delegate example below.

    • stopPropagation : Boolean (optional)

      This option is only valid for listeners bound to Elements. true to call stopPropagation on the event object before firing the handler.

    • preventDefault : Boolean (optional)

      This option is only valid for listeners bound to Elements. true to call preventDefault on the event object before firing the handler.

    • stopEvent : Boolean (optional)

      This option is only valid for listeners bound to Elements. true to call stopEvent on the event object before firing the handler.

    • args : Array (optional)

      Optional arguments to pass to the handler function. Any additional arguments passed to fireEvent will be appended to these arguments.

    • destroyable : Boolean (optional)

      When specified as true, the function returns a destroyable object. An object which implements the destroy method which removes all listeners added in this call. This syntax can be a helpful shortcut to using un; particularly when removing multiple listeners. NOTE – not compatible when using the element option. See un for the proper syntax for removing listeners added using the element config.

      Defaults to: false

    • priority : Number (optional)

      An optional numeric priority that determines the order in which event handlers are run. Event handlers with no priority will be run as if they had a priority of 0. Handlers with a higher priority will be prioritized to run sooner than those with a lower priority. Negative numbers can be used to set a priority lower than the default. Internally, the framework uses a range of 1000 or greater, and -1000 or lesser for handlers that are intended to run before or after all others, so it is recommended to stay within the range of -999 to 999 when setting the priority of event handlers in application-level code. A priority must be an integer to be valid. Fractional values are reserved for internal framework use.

    • order : String (optional)

      A legacy option that is provided for backward compatibility. It is recommended to use the priority option instead. Available options are:

      • 'before': equal to a priority of 100
      • 'current': equal to a priority of 0 or default priority
      • 'after': equal to a priority of -100

      Defaults to: 'current'

  • order : String (optional)

    A shortcut for the order event option. Provided for backward compatibility. Please use the priority event option instead.

---

Словом, масса опций, и это ещё неполное описание всех возможностей api addListener.

Но для начального понимания, думаю будет достаточно. Всю остальную информацию, лучше, конечно же брать из api библиотеки.