ExtJS 4: Using Listeners objects in Controllers (this.control)

When setting up a controller in ExtJS 4, you might do something like this:

Ext.define('app.controller.myController', {
    init: function() {
        this.control({
            'form > textfield': {
                change: this.textFieldChange
            }
        })
    },
    textFieldChange: function(textField, newValue, oldValue, options) {
      alert('The text box went from' + oldValue + ' to ' + newValue);
    }
});

What this code is saying is “Find every textfield inside of the form in the current view (usually the viewport) and, whenever the value changes, fire the textFieldChange method”. Now, this is fine and all, but what if your textFieldChange method sent a request to the server? That would mean that, for every character you typed, a new request would be created and sent to the server causing a lot of unnecessary overhead. Read more