Ext JS 4 – понимание this.control, селекторов и обработки событий

Question

Я пытаюсь понять в Ext JS 4 (MVC), как работает обработка событий на кнопках, полях со списком и тому подобное.

В частности, я считаю, что в MVC мы должны использовать «this.control» в функции инициализации контроллера.

Например, у меня работает следующее:

this.control({
    'eventlist': {
        itemdblclick: this.eventRowClicked
    },
    'eventedit button[action=save]': {
        click: this.updateEvent
    }
});

Кажется простым, я выбираю представление «список событий» и регистрируюсь на событие eventRowClicked для сетки.Затем, в моем представлении «eventedit», происходит перехват нажатия кнопки (кнопки сохранения).

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

Я попробовал это, но это не сработало (я также пробовал выбрать вместо изменения):

'eventedit dispositionpop': {
    change: function(combo, ewVal, oldVal) {
        debugger;
    }
}

Все примеры, которые я могу найти, не используют this.control, они либо захватывают компонент (Ext.get?) в переменную, либо что-то подобное.Я считаю, что эти методы не подходят для MVC или, возможно, не являются самым эффективным способом для Ext JS 4.

Итак, две вещи, которые я хочу знать: как мне зарегистрироваться для определенного события выбора или изменения поля со списком и что я могу прочитать, чтобы лучше понять, что происходит в this.control - например, это селекторы CSS?

Answer 1

Это не селекторы CSS, а похожие на селекторы CSS.Давайте рассмотрим такой простой пример.Одно из ваших представлений имеет такую ​​структуру:

Ext.define('MyApp.NewView', {
  extends: 'Ext.SomeCmp',

  xtype: 'widget.newview',

  id: 'idForNewView',

  someProperty: 'propValue',

  // other stuff
});

Теперь вы можете назначать обработчики через control для этого представления тремя способами:

путь №1

Худший — использование id:

this.control({
    // notice the hashtag
    '#idForNewView': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

путь №2

Использование xtype:

this.control({
    'newview': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

путь №3

Использование свойства конфигурации:

this.control({
    '[someProperty=propValue]': {
        itemdblclick: this.eventRowClicked
    },
    // ...
});

И, конечно же, вы можете комбинировать их, как например f.i.объединить свойство xtype и config:

'newview[someProperty=propValue]': {

Разделение селекторов пробелами и > имеет то же значение, что и в css.

Для вашего примера лучшим способом будет путь №3 или сочетание свойств xtype и config.