ExtJS default filters example grid plugin

DefaultFilters.js

Ext.define('Example.grid.DefaultFilters', {
  extend: 'Ext.grid.filters.Filters',
  alias: 'plugin.defaultfilters',
  pluginId: 'defaultfilters',
  init: function(grid) {
    var me = this,
      store, headerCt;

    me.grid = grid;
    grid.filters = me;

    if (me.grid.normalGrid) {
      me.isLocked = true;
    }

    grid.clearFilters = me.clearFilters.bind(me);

    store = grid.store;
    headerCt = grid.headerCt;

    headerCt.on({
      scope: me,
      add: me.onAdd,
      menucreate: me.onMenuCreate
    });

    grid.on({
      scope: me,
      destroy: me.onGridDestroy,
      reconfigure: me.onReconfigure
    });

    me.bindStore(store);

    if (grid.stateful) {
      store.statefulFilters = true;
    }

    grid.on({
      destroy: function() {
        if (me.store && me.store.getFilters()){
          me.store.getFilters().un('remove', me.onFilterRemove, me);
        }
      },
      beforerender: function(){
        // NOTE: this will load store for grids that are currenlty 
        // rendering and resume suspended events so we can use our
        // grid normally.
        this.store && this.store.load();
        this.store.filters.resumeEvents(true);
      }
    });

    if (Ext.isArray(grid.defaultFilters)){

      grid.store.filters.suspendEvents();
      grid.store.filters.add(grid.defaultFilters);

      var i = 0,
        columns = grid.columns;

      for (i = 0, len = columns.length; i < len; i++) {
        var column = columns[i],
          defaultFilter = grid.defaultFilters.filter(function(df){ return df.property == column.dataIndex })[0];

        if(defaultFilter){

          Ext.merge(column.filter, defaultFilter)
        }
      }
    }

    // initColumns after we added properties from defaultFilters to
    // our respective columns
    me.initColumns();
  }
});