/*! * Ext JS Library 3.3.1 * Copyright(c) 2006-2010 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ /** * @class Ext.ux.grid.filter.ListFilter * @extends Ext.ux.grid.filter.Filter *List filters are able to be preloaded/backed by an Ext.data.Store to load * their options the first time they are shown. ListFilter utilizes the * {@link Ext.ux.menu.ListMenu} component.
*Although not shown here, this class accepts all configuration options * for {@link Ext.ux.menu.ListMenu}.
* *Example Usage:
** */ Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, { /** * @cfg {Array} options *var filters = new Ext.ux.grid.GridFilters({ ... filters: [{ type: 'list', dataIndex: 'size', phpMode: true, // options will be used as data to implicitly creates an ArrayStore options: ['extra small', 'small', 'medium', 'large', 'extra large'] }] }); *
*
data
to be used to implicitly create a data store * to back this list when the data source is local. If the * data for the list is remote, use the{@link #store}
* config instead.Each item within the provided array may be in one of the * following formats:
**
- Array : *
**options: [ [11, 'extra small'], [18, 'small'], [22, 'medium'], [35, 'large'], [44, 'extra large'] ] *
- Object : *
**labelField: 'name', // override default of 'text' options: [ {id: 11, name:'extra small'}, {id: 18, name:'small'}, {id: 22, name:'medium'}, {id: 35, name:'large'}, {id: 44, name:'extra large'} ] *
- String : *
*/ /** * @cfg {Boolean} phpMode *** options: ['extra small', 'small', 'medium', 'large', 'extra large'] *
Adjust the format of this filter. Defaults to false.
*When GridFilters
*@cfg encode = false
(default):* When GridFilters// phpMode == false (default): filter[0][data][type] list filter[0][data][value] value1 filter[0][data][value] value2 filter[0][field] prod // phpMode == true: filter[0][data][type] list filter[0][data][value] value1, value2 filter[0][field] prod *
@cfg encode = true
: **/ phpMode : false, /** * @cfg {Ext.data.Store} store * The {@link Ext.data.Store} this list should use as its data source * when the data source is remote. If the data for the list * is local, use the// phpMode == false (default): filter : [{"type":"list","value":["small","medium"],"field":"size"}] // phpMode == true: filter : [{"type":"list","value":"small,medium","field":"size"}] *
{@link #options}
config instead. */ /** * @private * Template method that is to initialize the filter and install required menu items. * @param {Object} config */ init : function (config) { this.dt = new Ext.util.DelayedTask(this.fireUpdate, this); // if a menu already existed, do clean up first if (this.menu){ this.menu.destroy(); } this.menu = new Ext.ux.menu.ListMenu(config); this.menu.on('checkchange', this.onCheckChange, this); }, /** * @private * Template method that is to get and return the value of the filter. * @return {String} The value of this filter */ getValue : function () { return this.menu.getSelected(); }, /** * @private * Template method that is to set the value of the filter. * @param {Object} value The value to set the filter */ setValue : function (value) { this.menu.setSelected(value); this.fireEvent('update', this); }, /** * @private * Template method that is to return true if the filter * has enough configuration information to be activated. * @return {Boolean} */ isActivatable : function () { return this.getValue().length > 0; }, /** * @private * Template method that is to get and return serialized filter data for * transmission to the server. * @return {Object/Array} An object or collection of objects containing * key value pairs representing the current configuration of the filter. */ getSerialArgs : function () { var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()}; return args; }, /** @private */ onCheckChange : function(){ this.dt.delay(this.updateBuffer); }, /** * Template method that is to validate the provided Ext.data.Record * against the filters configuration. * @param {Ext.data.Record} record The record to validate * @return {Boolean} true if the record is valid within the bounds * of the filter, false otherwise. */ validateRecord : function (record) { return this.getValue().indexOf(record.get(this.dataIndex)) > -1; } });