Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 780
Scott Szretter Avatar asked Nov 29 '11 16:11

Scott Szretter


1 Answers

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.

like image 147
Molecular Man Avatar answered Sep 17 '22 13:09

Molecular Man