Ext JS 4 - understanding this.control, selectors and event handling

Question

I am trying to understand in Ext JS 4 (MVC) how event handling on buttons, comboboxes and similar work.

Specifically, I believe in MVC we are supposed to be using "this.control" in the controller init function.

For example, I have the following working:

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

Seems straightforward, I am selecting the 'eventlist' view and registering for an eventRowClicked event for the grid. Then, in my 'eventedit' view, trapping for a button click (the save button).

What I need next, is to respond to a combobox select or change event. I have multiple comboboxes in my view, so I need a specific one.

I tried this, but it did not work (I also tried select instead of change):

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

All the examples I can find do not use 'this.control', they either grab the component (Ext.get?) in to a variable, or similar. I believe those methods are not proper mvc - or possibly not the most efficient way for Ext JS 4.

So the two things I want to know - how would I register for a specific combo box select or change event, and what can I read to better understand what is happening in this.control - for example, are those css selectors?

Answer 1

Those are not css selectors but they are like css selectors. Let's take a look at such simple example. One of your views has such a structure:

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

  xtype: 'widget.newview',

  id: 'idForNewView',

  someProperty: 'propValue',

  // other stuff
});

Now you can assign handlers via control for this view using three ways:

way No1

The worst one - using id:

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

way No2

Using xtype:

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

way No3

Using config property:

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

And of course you can combine them like f.i. combine xtype and config property:

'newview[someProperty=propValue]': {

Separating selectors with whitespace and > has the same meaning as in css.

For your example the best way would be the way No3 or combining xtype and config property.