examples/grid-filtering/grid/filter/DateFilter.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.grid.filter.DateFilter = Ext.extend(Ext.grid.filter.Filter, {\r
  10     /**\r
  11      * @cfg {Date} dateFormat\r
  12      * The date format applied to the menu's {@link Ext.menu.DateMenu}\r
  13      */\r
  14         dateFormat: 'm/d/Y',\r
  15     /**\r
  16      * @cfg {Object} pickerOpts\r
  17      * The config object that will be passed to the menu's {@link Ext.menu.DateMenu} during\r
  18      * initialization (sets minDate, maxDate and format to the same configs specified on the filter)\r
  19      */\r
  20         pickerOpts: {},\r
  21     /**\r
  22      * @cfg {String} beforeText\r
  23      * The text displayed for the "Before" menu item\r
  24      */\r
  25     beforeText: 'Before',\r
  26     /**\r
  27      * @cfg {String} afterText\r
  28      * The text displayed for the "After" menu item\r
  29      */\r
  30     afterText: 'After',\r
  31     /**\r
  32      * @cfg {String} onText\r
  33      * The text displayed for the "On" menu item\r
  34      */\r
  35     onText: 'On',\r
  36     /**\r
  37      * @cfg {Date} minDate\r
  38      * The minimum date allowed in the menu's {@link Ext.menu.DateMenu}\r
  39      */\r
  40     /**\r
  41      * @cfg {Date} maxDate\r
  42      * The maximum date allowed in the menu's {@link Ext.menu.DateMenu}\r
  43      */\r
  44         \r
  45         init: function() {\r
  46                 var opts = Ext.apply(this.pickerOpts, {\r
  47                         minDate: this.minDate, \r
  48                         maxDate: this.maxDate, \r
  49                         format:  this.dateFormat\r
  50                 });\r
  51                 var dates = this.dates = {\r
  52                         'before': new Ext.menu.CheckItem({text: this.beforeText, menu: new Ext.menu.DateMenu(opts)}),\r
  53                         'after':  new Ext.menu.CheckItem({text: this.afterText, menu: new Ext.menu.DateMenu(opts)}),\r
  54                         'on':     new Ext.menu.CheckItem({text: this.onText, menu: new Ext.menu.DateMenu(opts)})\r
  55     };\r
  56                                 \r
  57                 this.menu.add(dates.before, dates.after, "-", dates.on);\r
  58                 \r
  59                 for(var key in dates) {\r
  60                         var date = dates[key];\r
  61                         date.menu.on('select', this.onSelect.createDelegate(this, [date]), this);\r
  62   \r
  63       date.on('checkchange', function(){\r
  64         this.setActive(this.isActivatable());\r
  65                         }, this);\r
  66                 };\r
  67         },\r
  68   \r
  69         onSelect: function(date, menuItem, value, picker) {\r
  70     date.setChecked(true);\r
  71     var dates = this.dates;\r
  72     \r
  73     if(date == dates.on) {\r
  74       dates.before.setChecked(false, true);\r
  75       dates.after.setChecked(false, true);\r
  76     } else {\r
  77       dates.on.setChecked(false, true);\r
  78       \r
  79       if(date == dates.after && dates.before.menu.picker.value < value) {\r
  80         dates.before.setChecked(false, true);\r
  81       } else if (date == dates.before && dates.after.menu.picker.value > value) {\r
  82         dates.after.setChecked(false, true);\r
  83       }\r
  84     }\r
  85     \r
  86     this.fireEvent("update", this);\r
  87   },\r
  88   \r
  89         getFieldValue: function(field) {\r
  90                 return this.dates[field].menu.picker.getValue();\r
  91         },\r
  92         \r
  93         getPicker: function(field) {\r
  94                 return this.dates[field].menu.picker;\r
  95         },\r
  96         \r
  97         isActivatable: function() {\r
  98                 return this.dates.on.checked || this.dates.after.checked || this.dates.before.checked;\r
  99         },\r
 100         \r
 101         setValue: function(value) {\r
 102                 for(var key in this.dates) {\r
 103                         if(value[key]) {\r
 104                                 this.dates[key].menu.picker.setValue(value[key]);\r
 105                                 this.dates[key].setChecked(true);\r
 106                         } else {\r
 107                                 this.dates[key].setChecked(false);\r
 108                         }\r
 109     }\r
 110         },\r
 111         \r
 112         getValue: function() {\r
 113                 var result = {};\r
 114                 for(var key in this.dates) {\r
 115                         if(this.dates[key].checked) {\r
 116                                 result[key] = this.dates[key].menu.picker.getValue();\r
 117       }\r
 118     }   \r
 119                 return result;\r
 120         },\r
 121         \r
 122         serialize: function() {\r
 123                 var args = [];\r
 124                 if(this.dates.before.checked) {\r
 125                         args = [{type: 'date', comparison: 'lt', value: this.getFieldValue('before').format(this.dateFormat)}];\r
 126     }\r
 127                 if(this.dates.after.checked) {\r
 128                         args.push({type: 'date', comparison: 'gt', value: this.getFieldValue('after').format(this.dateFormat)});\r
 129     }\r
 130                 if(this.dates.on.checked) {\r
 131                         args = {type: 'date', comparison: 'eq', value: this.getFieldValue('on').format(this.dateFormat)};\r
 132     }\r
 133 \r
 134     this.fireEvent('serialize', args, this);\r
 135                 return args;\r
 136         },\r
 137         \r
 138         validateRecord: function(record) {\r
 139                 var val = record.get(this.dataIndex).clearTime(true).getTime();\r
 140                 \r
 141                 if(this.dates.on.checked && val != this.getFieldValue('on').clearTime(true).getTime()) {\r
 142                         return false;\r
 143     }\r
 144                 if(this.dates.before.checked && val >= this.getFieldValue('before').clearTime(true).getTime()) {\r
 145                         return false;\r
 146     }\r
 147                 if(this.dates.after.checked && val <= this.getFieldValue('after').clearTime(true).getTime()) {\r
 148                         return false;\r
 149     }\r
 150                 return true;\r
 151         }\r
 152 });