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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With