Ext.ux.grid.DefaultFilters

DefaultFilters.js

/**
 * Helps applying default filter values from grid to store.
 *
 * @example In your window with grid you could do:
 * <pre>
	initComponent: function() {
		this.callParent();

		// apply default filters from grid to store
		var grid = this.down('grid');
		var defaultFilters = Ext.create('Ext.ux.grid.DefaultFilters');
		defaultFilters.apply(grid);
	},
 * </pre>
 *
 * @author Maciej "Nux" Jaros
 * @license CC-BY
 */
Ext.define('Ext.ux.grid.DefaultFilters', {
	/**
	 * @constructor
	 *
	 * @param {Object} config Configuration overrides
	 */
	constructor: function(config) {
		Ext.apply(this, config);
		
		// for now this is the only filter type supported
		this.supportedFilters.push({
			isKnown : function(filter) {
				return filter.type === 'string' && filter.operator === 'like';
			},
			match : function(filter, recordValue) {
				return recordValue.indexOf(filter.value) === 0;
			}
		});
	}
	/**
	 * Supported filters matching rules.
	 *
	 * This is an extension point. You can add more rules matching here.
	 *
	 * This is an array of objects that MUST implement two functions:
	 * <li>`isKnown : function(filter)` -- function returns true if the filter is known
	 * <li>`match : function(filter, recordValue)` -- function returns true if the filter is know
	 *
	 * See contructor for an example.
	 */
	, supportedFilters: []
	/**
	 * Rules prepared in `prepareMatchingRules`.
	 * @private
	 */
	, _matchingRules: []
	/**
	 * Prepares matching function for each column.
	 *
	 * @param {Ext.grid.column.Column} column
	 * @returns {Object} with `__length` saying how many rules are there.
	 * @private
	 */
	, _appendMatchingRule: function(column) {
		for (var i = 0; i < this.supportedFilters.length; i++) {
			var matchingRule = this.supportedFilters[i];
			if (matchingRule.isKnown(column.filter)) {
				this._matchingRules.push({
					column: column,
					match: function(recordValue) {
						return matchingRule.match(column.filter, recordValue);
					}
				});
			}
		}
	}
	/**
	 * Prepares matching functions for each column.
	 *
	 * @param {Ext.grid.Panel} grid
	 * @returns {Number} Length of matched rules.
	 */
	, prepareMatchingRules: function(grid) {
		for (var i = 0; i < grid.columns.length; i++) {
			var column = grid.columns[i];
			// if there is a default value
			if (column.filter && column.filter.value) {
				this._appendMatchingRule(column);
			}
		}
		return this._matchingRules.length;
	}
	/**
	 * Match record with pre-prepapred rules.
	 *
	 * @param {Ext.data.Model} record Record to match.
	 */
	, matchRecord: function(record) {
		for (var i = 0; i < this._matchingRules.length; i++) {
			var matchingRule = this._matchingRules[i];
			var recordValue = record.get(matchingRule.column.dataIndex);
			if (!matchingRule.match(recordValue)) {
				return false;
			}
		}
		return true;
	}
	/**
	 * Apply pre-prepapred rules to store.
	 *
	 * @note The store MUST be ready for filtering.
	 *
	 * @param {Ext.data.Store} store Loaded store.
	 */
	, applyMatchingRules: function(store) {
		var me = this;
		store.filterBy(function(record) {
			// true will display the record, false will not
			return me.matchRecord(record);
		});
	}
	/**
	 * Apply default filter values from grid to store.
	 *
	 * This should work for all string filters.
	 *
	 * @param {Ext.grid.Panel} grid
	 */
	, apply: function(grid) {
		var store = grid.getStore();

		// find filters we need to aplly
		this.prepareMatchingRules(grid);

		// hook load function and apply filters
		var me = this;
		store.load({
			callback: function() {
				// as seems store is not actually ready for filtering immediately after load...
				// hence we need a timeout to apply filters
				setTimeout(function(){
					me.applyMatchingRules(store);
				}, 100);
			}
		});
	}
});