Adding Before & After Filters in Sencha Touch MVC Controllers

BeforeFilters in RoR are a great way to manage controller accesses or do execute any other specific controller action triggers.

Here is a simple way of mimicking this great RoR feature on Sencha Touch MVC.

Create a file named app/controllers/Controllers.js with the following content:

Ext.Dispatcher.on('before-dispatch', function(interaction) {
  if(Ext.isFunction(interaction.controller.beforeFilter)) {
    return interaction.controller.beforeFilter.call();
  };
  return true;
});


Ext.Dispatcher.on('dispatch', function(interaction) {
  if(Ext.isFunction(interaction.controller.afterFilter)) {
    return interaction.controller.afterFilter.call();
  };
  return true;
});

Ext.Dispatcher.on('before-dispatch', function(interaction) {

if(Ext.isFunction(interaction.controller.beforeFilter)) {

return interaction.controller.beforeFilter.call();

};

return true;

});

Ext.Dispatcher.on('dispatch', function(interaction) {

if(Ext.isFunction(interaction.controller.afterFilter)) {

return interaction.controller.afterFilter.call();

};

return true;

});

Include this in your HTML document.

Now, you can add your beforeFilter action to all your controllers like following:

Ext.regController('TestController', {
  beforeFilter: function() {
    console.log('Hi! I am a beforeFilter!');
  },
  afterFilter: function() {
    console.log('Hi! I am an afterFilter!');
  },
  index: function() {
    App.views.viewport.reveal('testView');
  }
});

Ext.regController('TestController', {

beforeFilter: function() {

console.log('Hi! I am a beforeFilter!');

afterFilter: function() {

console.log('Hi! I am an afterFilter!');

index: function() {

App.views.viewport.reveal('testView');

}

});

Reference: Adding Callbacks to your Sencha Touch Controllers