+var filters = Ext.create('Ext.ux.grid.GridFilters', { + ... + filters: [{ + // required configs + type: 'boolean', + dataIndex: 'visible' + + // optional configs + defaultValue: null, // leave unselected (false selected by default) + yesText: 'Yes', // default + noText: 'No' // default + }] +}); + *

+var filters = Ext.create('Ext.ux.grid.GridFilters', { + ... + filters: [{ + // required configs + type: 'date', + dataIndex: 'dateAdded', + + // optional configs + dateFormat: 'm/d/Y', // default + beforeText: 'Before', // default + afterText: 'After', // default + onText: 'On', // default + pickerOpts: { + // any DatePicker configs + }, + + active: true // default is false + }] +}); + *

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.grid.menu.ListMenu} component.

Although not shown here, this class accepts all configuration options + * for {@link Ext.ux.grid.menu.ListMenu}.

+var filters = Ext.create('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.

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 : + *


+     * options: ['extra small', 'small', 'medium', 'large', 'extra large']
+     *

+ *

Adjust the format of this filter. Defaults to false.

When GridFilters @cfg encode = false (default):


+// 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 (default):
+filter : [{"type":"list","value":["small","medium"],"field":"size"}]
+
+// phpMode == true:
+filter : [{"type":"list","value":"small,medium","field":"size"}]
+     *

remote

{@link #options}

true

Example Usage:


+var filters = Ext.create('Ext.ux.grid.GridFilters', {
+    ...
+    filters: [{
+        type: 'numeric',
+        dataIndex: 'price'
+    }]
+});
+ *

Any of the configuration options for {@link Ext.ux.grid.menu.RangeMenu} can also be specified as + * configurations to NumericFilter, and will be copied over to the internal menu instance automatically.

true

Example Usage:


+var filters = Ext.create('Ext.ux.grid.GridFilters', {
+    ...
+    filters: [{
+        // required configs
+        type: 'string',
+        dataIndex: 'name',
+
+        // optional configs
+        value: 'foo',
+        active: true, // default is false
+        iconCls: 'ux-gridfilter-text-icon' // default
+        // any Ext.form.field.Text configs accepted
+    }]
+});
+ *

'ux-gridfilter-text-icon'

true

+ * fieldCls : Ext.form.field.Number + * + */ + fieldCls : 'Ext.form.field.Number', + + /** + * @cfg {Object} fieldCfg + * The default configuration options for any field item unless superseded + * by the {@link #fields} configuration. + * Defaults to:

+     * fieldCfg : {}
+     *

+ * Example usage: + *


+fieldCfg : {
+    width: 150,
+},
+     *

+ */ + + /** + * @cfg {Object} fields + * The field items may be configured individually + * Defaults to undefined. + * Example usage: + *


+fields : {
+    gt: { // override fieldCfg options
+        width: 200,
+        fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
+    }
+},
+     *

+ */ + + /** + * @cfg {Object} iconCls + * The iconCls to be applied to each comparator field item. + * Defaults to:

+iconCls : {
+    gt : 'ux-rangemenu-gt',
+    lt : 'ux-rangemenu-lt',
+    eq : 'ux-rangemenu-eq'
+}
+     *

+ */ + iconCls : { + gt : 'ux-rangemenu-gt', + lt : 'ux-rangemenu-lt', + eq : 'ux-rangemenu-eq' + }, + + /** + * @cfg {Object} fieldLabels + * Accessible label text for each comparator field item. Can be overridden by localization + * files. Defaults to:

+fieldLabels : {
+     gt: 'Greater Than',
+     lt: 'Less Than',
+     eq: 'Equal To'
+}

+ */ + fieldLabels: { + gt: 'Greater Than', + lt: 'Less Than', + eq: 'Equal To' + }, + + /** + * @cfg {Object} menuItemCfgs + * Default configuration options for each menu item + * Defaults to:

+menuItemCfgs : {
+    emptyText: 'Enter Filter Text...',
+    selectOnFocus: true,
+    width: 125
+}
+     *

+ */ + menuItemCfgs : { + emptyText: 'Enter Number...', + selectOnFocus: false, + width: 155 + }, + + /** + * @cfg {Array} menuItems + * The items to be shown in this menu. Items are added to the menu + * according to their position within this array. Defaults to:

+     * menuItems : ['lt','gt','-','eq']
+     *

+ */ + menuItems : ['lt', 'gt', '-', 'eq'], + + + constructor : function (config) { + var me = this, + fields, fieldCfg, i, len, item, cfg, Cls; + + me.callParent(arguments); + + fields = me.fields = me.fields || {}; + fieldCfg = me.fieldCfg = me.fieldCfg || {}; + + me.addEvents( + /** + * @event update + * Fires when a filter configuration has changed + * @param {Ext.ux.grid.filter.Filter} this The filter object. + */ + 'update' + ); + + me.updateTask = Ext.create('Ext.util.DelayedTask', me.fireUpdate, me); + + for (i = 0, len = me.menuItems.length; i < len; i++) { + item = me.menuItems[i]; + if (item !== '-') { + // defaults + cfg = { + itemId: 'range-' + item, + enableKeyEvents: true, + hideLabel: false, + fieldLabel: me.iconTpl.apply({ + cls: me.iconCls[item] || 'no-icon', + text: me.fieldLabels[item] || '', + src: Ext.BLANK_IMAGE_URL + }), + labelSeparator: '', + labelWidth: 29, + listeners: { + scope: me, + change: me.onInputChange, + keyup: me.onInputKeyUp, + el: { + click: function(e) { + e.stopPropagation(); + } + } + }, + activate: Ext.emptyFn, + deactivate: Ext.emptyFn + }; + Ext.apply( + cfg, + // custom configs + Ext.applyIf(fields[item] || {}, fieldCfg[item]), + // configurable defaults + me.menuItemCfgs + ); + Cls = cfg.fieldCls || me.fieldCls; + item = fields[item] = Ext.create(Cls, cfg); + } + me.add(item); + } + }, + + /** + * @private + * called by this.updateTask + */ + fireUpdate : function () { + this.fireEvent('update', this); + }, + + /** + * Get and return the value of the filter. + * @return {String} The value of this filter + */ + getValue : function () { + var result = {}, key, field; + for (key in this.fields) { + field = this.fields[key]; + if (field.isValid() && field.getValue() !== null) { + result[key] = field.getValue(); + } + } + return result; + }, + + /** + * Set the value of this menu and fires the 'update' event. + * @param {Object} data The data to assign to this menu + */ + setValue : function (data) { + var key; + for (key in this.fields) { + this.fields[key].setValue(key in data ? data[key] : ''); + } + this.fireEvent('update', this); + }, + + /** + * @private + * Handler method called when there is a keyup event on an input + * item of this menu. + */ + onInputKeyUp: function(field, e) { + if (e.getKey() === e.RETURN && field.isValid()) { + e.stopEvent(); + this.hide(); + } + }, + + /** + * @private + * Handler method called when the user changes the value of one of the input + * items in this menu. + */ + onInputChange: function(field) { + var me = this, + fields = me.fields, + eq = fields.eq, + gt = fields.gt, + lt = fields.lt; + + if (field == eq) { + if (gt) { + gt.setValue(null); + } + if (lt) { + lt.setValue(null); + } + } + else { + eq.setValue(null); + } + + // restart the timer + this.updateTask.delay(this.updateBuffer); + } +}, function() { + + /** + * @cfg {Ext.XTemplate} iconTpl + * A template for generating the label for each field in the menu + */ + this.prototype.iconTpl = Ext.create('Ext.XTemplate', + '' + ); + +}); +