Example Usage:
- *
-var filters = new 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 DateMenu 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 menuCfg, i, len, item, cfg, Cls; - - menuCfg = Ext.apply(this.pickerOpts, { - minDate: this.minDate, - maxDate: this.maxDate, - format: this.dateFormat, - listeners: { - scope: this, - select: this.onMenuSelect - } - }); - - this.fields = {}; - for (i = 0, len = this.menuItems.length; i < len; i++) { - item = this.menuItems[i]; - if (item !== '-') { - cfg = { - itemId: 'range-' + item, - text: this[item + 'Text'], - menu: new Ext.menu.DateMenu( - Ext.apply(menuCfg, { - itemId: item - }) - ), - listeners: { - scope: this, - checkchange: this.onCheckChange - } - }; - Cls = Ext.menu.CheckItem; - item = this.fields[item] = new Cls(cfg); - } - //this.add(item); - this.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(true); - return; - } - }, - - /** - * Handler for when the menu for a field fires the 'select' event - * @param {Object} date - * @param {Object} menuItem - * @param {Object} value - * @param {Object} picker - */ - onMenuSelect : function (menuItem, value, picker) { - var fields = this.fields, - field = this.fields[menuItem.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 && fields.before.menu.picker.value < value) { - fields.before.setChecked(false, true); - } else if (field == fields.before && fields.after.menu.picker.value > value) { - fields.after.setChecked(false, true); - } - } - this.fireEvent('update', this); - }, - - /** - * @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.fields[key].menu.picker.getValue(); - } - } - 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.fields[key].menu.picker.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.fields[item].menu.picker.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.picker; - }, - - /** - * 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); - - if(!Ext.isDate(val)){ - return false; - } - val = val.clearTime(true).getTime(); - - for (key in this.fields) { - if (this.fields[key].checked) { - pickerValue = this.getFieldValue(key).clearTime(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; - } +/** + * @class Ext.ux.grid.filter.DateFilter + * @extends Ext.ux.grid.filter.Filter + * Filter by a configurable Ext.menu.DateMenu + *
Example Usage:
+ *
+var filters = new 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 DateMenu 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 menuCfg, i, len, item, cfg, Cls; + + menuCfg = Ext.apply(this.pickerOpts, { + minDate: this.minDate, + maxDate: this.maxDate, + format: this.dateFormat, + listeners: { + scope: this, + select: this.onMenuSelect + } + }); + + this.fields = {}; + for (i = 0, len = this.menuItems.length; i < len; i++) { + item = this.menuItems[i]; + if (item !== '-') { + cfg = { + itemId: 'range-' + item, + text: this[item + 'Text'], + menu: new Ext.menu.DateMenu( + Ext.apply(menuCfg, { + itemId: item + }) + ), + listeners: { + scope: this, + checkchange: this.onCheckChange + } + }; + Cls = Ext.menu.CheckItem; + item = this.fields[item] = new Cls(cfg); + } + //this.add(item); + this.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(true); + return; + } + }, + + /** + * Handler for when the menu for a field fires the 'select' event + * @param {Object} date + * @param {Object} menuItem + * @param {Object} value + * @param {Object} picker + */ + onMenuSelect : function (menuItem, value, picker) { + var fields = this.fields, + field = this.fields[menuItem.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 && fields.before.menu.picker.value < value) { + fields.before.setChecked(false, true); + } else if (field == fields.before && fields.after.menu.picker.value > value) { + fields.after.setChecked(false, true); + } + } + this.fireEvent('update', this); + }, + + /** + * @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.fields[key].menu.picker.getValue(); + } + } + 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.fields[key].menu.picker.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.fields[item].menu.picker.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.picker; + }, + + /** + * 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); + + if(!Ext.isDate(val)){ + return false; + } + val = val.clearTime(true).getTime(); + + for (key in this.fields) { + if (this.fields[key].checked) { + pickerValue = this.getFieldValue(key).clearTime(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; + } }); \ No newline at end of file