Ext JS 4 - понимание this.control, селекторы и обработка событий - PullRequest
Новая
       13

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

14 голосов
/ 29 ноября 2011

Я пытаюсь понять в 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?

1 Ответ

30 голосов
/ 29 ноября 2011

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

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

  xtype: 'widget.newview',

  id: 'idForNewView',

  someProperty: 'propValue',

  // other stuff
});

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

путь №1

Худший из них - с использованием идентификатора: 

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
    },
    // ...
});

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

'newview[someProperty=propValue]': {

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

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

...