Why would you want to do this? Well, if you’re working on a project that’s not 100% ExtJS from top to bottom, it’s likely you’re using ExtJS along side other frameworks and cherry picking the best features as you need them. For example, at my current job, we use ExtJS for grids, forms, some data bound components we’ve built out ourselves and of course the accompanying stores that stick it all together but we don’t use ExtJS to provide a “single page app” in what may be considered the usual ExtJS MVC approach when using 4.x+.

So I decided to just give it a go and see what happened. After all, worse case scenario is I lose a little time working on a mini experiment that goes nowhere but teaches me at least something.

The solution is so simple, I’m not even going to bother with steps.

Here’s the finished code:

Ext.application({
 name: 'MyApp',
 controllers : [
  'MyController'
 ]
});

Now we define a controller:

Ext.define('MyApp.controller.MyController', {
 extend: 'Ext.app.Controller',
 init: function() {
  this.control({
   'button': {
    click: this.onAnyButtonClick
   }
  });
 },
 onAnyButtonClick : function ( b ) {
  console.log('a button was clicked');
 }
});

…and that is literally it. You can now add any listeners you like to the “control” definition and it will work beautifully (provided you stick to the rules of course) as per a controller in the ExtJS MVC model.

Why would you bother doing this? Well, I’ve found that as I build out the controller methods I’m reusing a lot more code than I thought, the code is more readable and it’s far simpler to have all the high level logic in one place.

Next time we will take a look at another challenge I’ve faced when mixing and matching frameworks; How to call your App and Controller methods from outside the ExtJS namespace.

Until then, please feel free to comment below, offer your own insights on this subject and any constructive criticism you have is more than welcome.