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?
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:
The worst one - using id:
this.control({
// notice the hashtag
'#idForNewView': {
itemdblclick: this.eventRowClicked
},
// ...
});
Using xtype:
this.control({
'newview': {
itemdblclick: this.eventRowClicked
},
// ...
});
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.