javascript view - Объясните обработку событий ExtJS 4




events production (5)

Еще один трюк для прослушивателей событий контроллера.

Вы можете использовать подстановочные знаки для наблюдения за событием любого компонента:

this.control({
   '*':{ 
       myCustomEvent: this.doSomething
   }
});

Недавно я начал изучать ExtJS и не понимаю, как обрабатывать события. У меня нет опыта предыдущих версий ExtJS.

Из чтения различных руководств, руководств и страниц документации я выяснил, как их использовать, но я не понимаю, как это работает. Я нашел несколько руководств для более старых версий ExtJS, но я не уверен, насколько они применимы в ExtJS 4.

Я специально смотрю «последнее слово» на такие вещи, как

  • какие аргументы передаются функции обработки событий? Есть ли стандартный набор аргументов, которые всегда передаются?
  • как определить пользовательские события для настраиваемых компонентов, которые мы пишем? как мы можем запустить это пользовательское событие?
  • действительно ли возвращаемое значение (true / false) влияет на то, как событие пузырится? Если нет, как мы можем управлять пузырьками событий изнутри или за пределами обработчика событий?
  • существует ли стандартный способ регистрации прослушивателей событий? (Я сталкивался с двумя разными способами до сих пор, и я не уверен, почему каждый метод использовался).

Например, этот вопрос заставляет меня поверить, что обработчик событий может получить немало аргументов. Я видел другие учебники, в которых для обработчика всего два аргумента. Какие изменения?


Широкий охват приложений

Как заставить диспетчеров разговаривать друг с другом ...

В дополнение к очень большому ответу выше я хочу упомянуть широкомасштабные события приложений, которые могут быть очень полезны в настройке MVC для обеспечения связи между контроллерами. (Extjs4.1)

Допустим, у нас есть контрольная станция (примеры Sencha MVC) с полем выбора:

Ext.define('Pandora.controller.Station', {
    extend: 'Ext.app.Controller',
    ...

    init: function() {
        this.control({
            'stationslist': {
                selectionchange: this.onStationSelect
            },
            ...
        });
    },

    ...

    onStationSelect: function(selModel, selection) {
        this.application.fireEvent('stationstart', selection[0]);
    },    
   ...
});

Когда поле выбора запускает событие изменения, функция onStationSelect запускается.

В рамках этой функции мы видим:

this.application.fireEvent('stationstart', selection[0]);

Это создает и запускает широко распространенное событие приложения, которое мы можем прослушивать с любого другого контроллера.

Таким образом, в другом контроллере мы можем теперь знать, когда было изменено поле выбора станции. Это делается путем прослушивания this.application.on следующим образом:

Ext.define('Pandora.controller.Song', {
    extend: 'Ext.app.Controller', 
    ...
    init: function() {
        this.control({
            'recentlyplayedscroller': {
                selectionchange: this.onSongSelect
            }
        });

        // Listen for an application wide event
        this.application.on({
            stationstart: this.onStationStart, 
                scope: this
        });
    },
    ....
    onStationStart: function(station) {
        console.info('I called to inform you that the Station controller select box just has been changed');
        console.info('Now what do you want to do next?');
    },
}

Если selectbox был изменен, теперь мы onStationStart функцию onStationStart в контроллере Song также ...

Из документов Sencha:

События приложений чрезвычайно полезны для событий с большим количеством контроллеров. Вместо того, чтобы слушать одно и то же событие просмотра в каждом из этих контроллеров, только один контроллер прослушивает событие просмотра и запускает событие приложения, которое другие могут прослушивать. Это также позволяет контроллерам общаться друг с другом, не зная о существовании друг друга и не завися от них.

В моем случае: нажатие на узел дерева для обновления данных на панели сетки.

Обновление 2016 благодаря @ gm2008 из комментариев ниже:

Что касается Ext.GlobalEvents специальных пользовательских событий приложения, новый метод теперь появляется после публикации ExtJS V5.1 , в котором используется Ext.GlobalEvents .

Когда вы Ext.GlobalEvents.fireEvent('custom_event'); события, вы можете вызвать: Ext.GlobalEvents.fireEvent('custom_event');

Когда вы регистрируете обработчик события, вы вызываете: Ext.GlobalEvents.on('custom_event', function(arguments){/* handler codes*/}, scope);

Этот метод не ограничивается контроллерами. Любой компонент может обрабатывать настраиваемое событие, помещая объект компонента в качестве области входных параметров.

Найдено в Sencha Docs: MVC Part 2


Еще две вещи, которые я нашел полезными, даже если они не являются частью вопроса, действительно.

Вы можете использовать метод relayEvents чтобы указать компоненту прослушивать определенные события другого компонента, а затем запускать их снова, как если бы они исходили из первого компонента. В документах API представлен пример сетки, передающей событие load хранилища. Это очень удобно при написании пользовательских компонентов, которые инкапсулируют несколько подкомпонентов.

Другой путь, то есть передача событий, полученных инкапсулирующим компонентом mycmp в один из его подкомпонентов subcmp , может быть выполнена следующим образом

mycmp.on('show' function (mycmp, eOpts)
{
   mycmp.subcmp.fireEvent('show', mycmp.subcmp, eOpts);
});

Начнем с описания обработки событий элементов DOM.

Обработка событий узла DOM

Прежде всего, вы не захотите напрямую работать с узлом DOM. Вместо этого вы, вероятно, захотите использовать интерфейс Ext.Element . Для назначения обработчиков событий были созданы Element.addListener и Element.on (они эквивалентны). Так, например, если у нас есть html:

<div id="test_node"></div>

и мы хотим добавить обработчик события click .
Возьмем Element :

var el = Ext.get('test_node');

Теперь давайте проверим документы для события click . Это обработчик может иметь три параметра:

щелкните (Ext.EventObject e, HTMLElement t, Object eOpts)

Зная все это, мы можем назначить обработчик:

//       event name      event handler
el.on(    'click'        , function(e, t, eOpts){
  // handling event here
});

Обработка событий Widgets

Обработка событий Widgets в значительной степени похожа на обработку событий узлов DOM.

Прежде всего, обработка событий виджетов реализуется с использованием Ext.util.Observable mixin. Чтобы правильно обрабатывать события, ваш виджет должен Ext.util.Observable как mixin. Все встроенные виджеты (например, Panel, Form, Tree, Grid, ...) по умолчанию имеют Ext.util.Observable как mixin.

Для виджетов существует два способа присвоения обработчиков. Первый - использовать on метода (или addListener ). Давайте, например, создадим виджет Button и присвоим ему событие click . Прежде всего, вы должны проверить документы событий для аргументов обработчика:

щелкните (Ext.button.Button this, событие e, объект eOpts)

Теперь давайте использовать:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button'
});
myButton.on('click', function(btn, e, eOpts) {
  // event handling here
  console.log(btn, e, eOpts);
});

Второй способ - использовать конфигурацию listeners виджета:

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  listeners : {
    click: function(btn, e, eOpts) {
      // event handling here
      console.log(btn, e, eOpts);
    }
  }
});

Обратите внимание: виджет Button - это особый вид виджетов. Событие Click можно назначить этому виджету, используя конфигурацию handler :

var myButton = Ext.create('Ext.button.Button', {
  text: 'Test button',
  handler : function(btn, e, eOpts) {
    // event handling here
    console.log(btn, e, eOpts);
  }
});

Утилизация индивидуальных событий

Прежде всего вам необходимо зарегистрировать событие, используя метод addEvents :

myButton.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);

Использование метода addEvents является необязательным. Поскольку комментарии к этому методу говорят, что нет необходимости использовать этот метод, но он обеспечивает место для документации по событиям.

Для fireEvent вашего мероприятия используйте метод fireEvent :

myButton.fireEvent('myspecialevent1', arg1, arg2, arg3, /* ... */);

arg1, arg2, arg3, /* ... */ будут переданы в обработчик. Теперь мы можем обработать ваше событие:

myButton.on('myspecialevent1', function(arg1, arg2, arg3, /* ... */) {
  // event handling here
  console.log(arg1, arg2, arg3, /* ... */);
});

Стоит отметить, что наилучшим местом для вставки addEvents метода addEvents метод addEvents виджета при определении нового виджета:

Ext.define('MyCustomButton', {
  extend: 'Ext.button.Button',
  // ... other configs,
  initComponent: function(){
    this.addEvents('myspecialevent1', 'myspecialevent2', 'myspecialevent3', /* ... */);
    // ...
    this.callParent(arguments);
  }
});
var myButton = Ext.create('MyCustomButton', { /* configs */ });

Предотвращение пузырьков событий

Чтобы предотвратить пузыри, вы можете return false или использовать Ext.EventObject.preventDefault() . Чтобы предотвратить действие браузера по умолчанию, используйте Ext.EventObject.stopPropagation() .

Например, давайте назначим обработчик события клика на нашу кнопку. И если не была нажата левая кнопка, запретите действие браузера по умолчанию:

myButton.on('click', function(btn, e){
  if (e.button !== 0)
    e.preventDefault();
});

Используйте JSON-js, сделанный доступным на Github Дугласом Крокфордом, он делает объект JSOn доступным в браузерах, которые изначально не поддерживают объект JSOn, просто включают единственный файл js на страницу ur, которая использует объект JSOn. https://github.com/douglascrockford/JSON-js

Также проверьте эту ссылку http://json.org/js.html





javascript extjs event-handling extjs4