3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.ux.grid.filter.DateFilter
9 * @extends Ext.ux.grid.filter.Filter
10 * Filter by a configurable Ext.menu.DateMenu
11 * <p><b><u>Example Usage:</u></b></p>
13 var filters = new Ext.ux.grid.GridFilters({
18 dataIndex: 'dateAdded',
21 dateFormat: 'm/d/Y', // default
22 beforeText: 'Before', // default
23 afterText: 'After', // default
24 onText: 'On', // default
26 // any DateMenu configs
29 active: true // default is false
34 Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
36 * @cfg {String} afterText
37 * Defaults to 'After'.
41 * @cfg {String} beforeText
42 * Defaults to 'Before'.
44 beforeText : 'Before',
46 * @cfg {Object} compareMap
47 * Map for assigning the comparison values used in serialization.
55 * @cfg {String} dateFormat
56 * The date format to return when using getValue.
57 * Defaults to 'm/d/Y'.
63 * Allowable date as passed to the Ext.DatePicker
64 * Defaults to undefined.
68 * Allowable date as passed to the Ext.DatePicker
69 * Defaults to undefined.
72 * @cfg {Array} menuItems
73 * The items to be shown in this menu
75 * menuItems : ['before', 'after', '-', 'on'],
78 menuItems : ['before', 'after', '-', 'on'],
81 * @cfg {Object} menuItemCfgs
82 * Default configuration options for each menu item
90 * @cfg {String} onText
96 * @cfg {Object} pickerOpts
97 * Configuration options for the date picker associated with each field.
103 * Template method that is to initialize the filter and install required menu items.
105 init : function (config) {
106 var menuCfg, i, len, item, cfg, Cls;
108 menuCfg = Ext.apply(this.pickerOpts, {
109 minDate: this.minDate,
110 maxDate: this.maxDate,
111 format: this.dateFormat,
114 select: this.onMenuSelect
119 for (i = 0, len = this.menuItems.length; i < len; i++) {
120 item = this.menuItems[i];
123 itemId: 'range-' + item,
124 text: this[item + 'Text'],
125 menu: new Ext.menu.DateMenu(
132 checkchange: this.onCheckChange
135 Cls = Ext.menu.CheckItem;
136 item = this.fields[item] = new Cls(cfg);
143 onCheckChange : function () {
144 this.setActive(this.isActivatable());
145 this.fireEvent('update', this);
150 * Handler method called when there is a keyup event on an input
153 onInputKeyUp : function (field, e) {
155 if (k == e.RETURN && field.isValid()) {
157 this.menu.hide(true);
163 * Handler for when the menu for a field fires the 'select' event
164 * @param {Object} date
165 * @param {Object} menuItem
166 * @param {Object} value
167 * @param {Object} picker
169 onMenuSelect : function (menuItem, value, picker) {
170 var fields = this.fields,
171 field = this.fields[menuItem.itemId];
173 field.setChecked(true);
175 if (field == fields.on) {
176 fields.before.setChecked(false, true);
177 fields.after.setChecked(false, true);
179 fields.on.setChecked(false, true);
180 if (field == fields.after && fields.before.menu.picker.value < value) {
181 fields.before.setChecked(false, true);
182 } else if (field == fields.before && fields.after.menu.picker.value > value) {
183 fields.after.setChecked(false, true);
186 this.fireEvent('update', this);
191 * Template method that is to get and return the value of the filter.
192 * @return {String} The value of this filter
194 getValue : function () {
195 var key, result = {};
196 for (key in this.fields) {
197 if (this.fields[key].checked) {
198 result[key] = this.fields[key].menu.picker.getValue();
206 * Template method that is to set the value of the filter.
207 * @param {Object} value The value to set the filter
208 * @param {Boolean} preserve true to preserve the checked status
209 * of the other fields. Defaults to false, unchecking the
212 setValue : function (value, preserve) {
214 for (key in this.fields) {
216 this.fields[key].menu.picker.setValue(value[key]);
217 this.fields[key].setChecked(true);
218 } else if (!preserve) {
219 this.fields[key].setChecked(false);
222 this.fireEvent('update', this);
227 * Template method that is to return <tt>true</tt> if the filter
228 * has enough configuration information to be activated.
231 isActivatable : function () {
233 for (key in this.fields) {
234 if (this.fields[key].checked) {
243 * Template method that is to get and return serialized filter data for
244 * transmission to the server.
245 * @return {Object/Array} An object or collection of objects containing
246 * key value pairs representing the current configuration of the filter.
248 getSerialArgs : function () {
250 for (var key in this.fields) {
251 if(this.fields[key].checked){
254 comparison: this.compareMap[key],
255 value: this.getFieldValue(key).format(this.dateFormat)
263 * Get and return the date menu picker value
264 * @param {String} item The field identifier ('before', 'after', 'on')
265 * @return {Date} Gets the current selected value of the date field
267 getFieldValue : function(item){
268 return this.fields[item].menu.picker.getValue();
272 * Gets the menu picker associated with the passed field
273 * @param {String} item The field identifier ('before', 'after', 'on')
274 * @return {Object} The menu picker
276 getPicker : function(item){
277 return this.fields[item].menu.picker;
281 * Template method that is to validate the provided Ext.data.Record
282 * against the filters configuration.
283 * @param {Ext.data.Record} record The record to validate
284 * @return {Boolean} true if the record is valid within the bounds
285 * of the filter, false otherwise.
287 validateRecord : function (record) {
290 val = record.get(this.dataIndex);
292 if(!Ext.isDate(val)){
295 val = val.clearTime(true).getTime();
297 for (key in this.fields) {
298 if (this.fields[key].checked) {
299 pickerValue = this.getFieldValue(key).clearTime(true).getTime();
300 if (key == 'before' && pickerValue <= val) {
303 if (key == 'after' && pickerValue >= val) {
306 if (key == 'on' && pickerValue != val) {