Example Usage:
+ *
+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
+ }]
+});
+ * + * menuItems : ['before', 'after', '-', 'on'], + *+ */ + menuItems : ['before', 'after', '-', 'on'], + + /** + * @cfg {Object} menuItemCfgs + * Default configuration options for each menu item + */ + menuItemCfgs : { + selectOnFocus: true, + width: 125 + }, + + /** + * @cfg {String} onText + * Defaults to 'On'. + */ + onText : 'On', + + /** + * @cfg {Object} pickerOpts + * Configuration options for the date picker associated with each field. + */ + pickerOpts : {}, + + /** + * @private + * Template method that is to initialize the filter and install required menu items. + */ + init : function (config) { + var me = this, + pickerCfg, i, len, item, cfg; + + pickerCfg = Ext.apply(me.pickerOpts, { + xtype: 'datepicker', + minDate: me.minDate, + maxDate: me.maxDate, + format: me.dateFormat, + listeners: { + scope: me, + select: me.onMenuSelect + } + }); + + me.fields = {}; + for (i = 0, len = me.menuItems.length; i < len; i++) { + item = me.menuItems[i]; + if (item !== '-') { + cfg = { + itemId: 'range-' + item, + text: me[item + 'Text'], + menu: Ext.create('Ext.menu.Menu', { + items: [ + Ext.apply(pickerCfg, { + itemId: item + }) + ] + }), + listeners: { + scope: me, + checkchange: me.onCheckChange + } + }; + item = me.fields[item] = Ext.create('Ext.menu.CheckItem', cfg); + } + //me.add(item); + me.menu.add(item); + } + }, + + onCheckChange : function () { + this.setActive(this.isActivatable()); + 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) { + var k = e.getKey(); + if (k == e.RETURN && field.isValid()) { + e.stopEvent(); + this.menu.hide(); + } + }, + + /** + * Handler for when the DatePicker for a field fires the 'select' event + * @param {Ext.picker.Date} picker + * @param {Object} picker + * @param {Object} date + */ + onMenuSelect : function (picker, date) { + var fields = this.fields, + field = this.fields[picker.itemId]; + + field.setChecked(true); + + if (field == fields.on) { + fields.before.setChecked(false, true); + fields.after.setChecked(false, true); + } else { + fields.on.setChecked(false, true); + if (field == fields.after && this.getFieldValue('before') < date) { + fields.before.setChecked(false, true); + } else if (field == fields.before && this.getFieldValue('after') > date) { + fields.after.setChecked(false, true); + } + } + this.fireEvent('update', this); + + picker.up('menu').hide(); + }, + + /** + * @private + * Template method that is to get and return the value of the filter. + * @return {String} The value of this filter + */ + getValue : function () { + var key, result = {}; + for (key in this.fields) { + if (this.fields[key].checked) { + result[key] = this.getFieldValue(key); + } + } + return result; + }, + + /** + * @private + * Template method that is to set the value of the filter. + * @param {Object} value The value to set the filter + * @param {Boolean} preserve true to preserve the checked status + * of the other fields. Defaults to false, unchecking the + * other fields + */ + setValue : function (value, preserve) { + var key; + for (key in this.fields) { + if(value[key]){ + this.getPicker(key).setValue(value[key]); + this.fields[key].setChecked(true); + } else if (!preserve) { + this.fields[key].setChecked(false); + } + } + 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 () { + var key; + for (key in this.fields) { + if (this.fields[key].checked) { + return true; + } + } + return false; + }, + + /** + * @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 = []; + for (var key in this.fields) { + if(this.fields[key].checked){ + args.push({ + type: 'date', + comparison: this.compareMap[key], + value: this.getFieldValue(key).format(this.dateFormat) + }); + } + } + return args; + }, + + /** + * Get and return the date menu picker value + * @param {String} item The field identifier ('before', 'after', 'on') + * @return {Date} Gets the current selected value of the date field + */ + getFieldValue : function(item){ + return this.getPicker(item).getValue(); + }, + + /** + * Gets the menu picker associated with the passed field + * @param {String} item The field identifier ('before', 'after', 'on') + * @return {Object} The menu picker + */ + getPicker : function(item){ + return this.fields[item].menu.items.first(); + }, + + /** + * 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) { + var key, + pickerValue, + val = record.get(this.dataIndex), + clearTime = Ext.Date.clearTime; + + if(!Ext.isDate(val)){ + return false; + } + val = clearTime(val, true).getTime(); + + for (key in this.fields) { + if (this.fields[key].checked) { + pickerValue = clearTime(this.getFieldValue(key), true).getTime(); + if (key == 'before' && pickerValue <= val) { + return false; + } + if (key == 'after' && pickerValue >= val) { + return false; + } + if (key == 'on' && pickerValue != val) { + return false; + } + } + } + return true; + } +});