A while back, I did a post on creating a custom Event Domain in Ext JS. If you’re new to the concept, Event Domains in Ext JS are simply classes that fire events which your controllers can listen to. The awesome part about domains, however, is that the “domain” of the events getting fired within your application are grouped together by type (read domain). This allows for very granular control over the event listeners that you construct in your controllers.

For example, the boilerplate for your controller since Ext JS 4.2.1 should now look something like this:

Ext.define('CustomController', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.listen({
            controller: {},
            component: {},
            direct: {},
            global: {},
            store: {}
        })
    }
})

Ext JS comes with the 5 domains bolded above, and as we saw in the last post that you can create your own rather easily. In the example I shared, I created a custom event domain for “proxy”. With this custom domain setup, Ext JS will now monitor all events fired by the Ext.data.proxy.Proxy class, and our controllers can easily listen to those events and do whatever we need them to do. Pretty slick.

A Little Fancier

As nice as this works, I recently came across a scenario where I wanted a bit more More >