docs/source/DateFilter.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.ux.grid.filter.DateFilter"></div>/** \r
   9  * @class Ext.ux.grid.filter.DateFilter\r
  10  * @extends Ext.ux.grid.filter.Filter\r
  11  * Filter by a configurable Ext.menu.DateMenu\r
  12  * <p><b><u>Example Usage:</u></b></p>\r
  13  * <pre><code>    \r
  14 var filters = new Ext.ux.grid.GridFilters({\r
  15     ...\r
  16     filters: [{\r
  17         // required configs\r
  18         type: 'date',\r
  19         dataIndex: 'dateAdded',\r
  20         \r
  21         // optional configs\r
  22         dateFormat: 'm/d/Y',  // default\r
  23         beforeText: 'Before', // default\r
  24         afterText: 'After',   // default\r
  25         onText: 'On',         // default\r
  26         pickerOpts: {\r
  27             // any DateMenu configs\r
  28         },\r
  29 \r
  30         active: true // default is false\r
  31     }]\r
  32 });\r
  33  * </code></pre>\r
  34  */\r
  35 Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
  36     <div id="cfg-Ext.ux.grid.filter.DateFilter-afterText"></div>/**\r
  37      * @cfg {String} afterText\r
  38      * Defaults to 'After'.\r
  39      */\r
  40     afterText : 'After',\r
  41     <div id="cfg-Ext.ux.grid.filter.DateFilter-beforeText"></div>/**\r
  42      * @cfg {String} beforeText\r
  43      * Defaults to 'Before'.\r
  44      */\r
  45     beforeText : 'Before',\r
  46     <div id="cfg-Ext.ux.grid.filter.DateFilter-compareMap"></div>/**\r
  47      * @cfg {Object} compareMap\r
  48      * Map for assigning the comparison values used in serialization.\r
  49      */\r
  50     compareMap : {\r
  51         before: 'lt',\r
  52         after:  'gt',\r
  53         on:     'eq'\r
  54     },\r
  55     <div id="cfg-Ext.ux.grid.filter.DateFilter-dateFormat"></div>/**\r
  56      * @cfg {String} dateFormat\r
  57      * The date format to return when using getValue.\r
  58      * Defaults to 'm/d/Y'.\r
  59      */\r
  60     dateFormat : 'm/d/Y',\r
  61 \r
  62     <div id="cfg-Ext.ux.grid.filter.DateFilter-maxDate"></div>/**\r
  63      * @cfg {Date} maxDate\r
  64      * Allowable date as passed to the Ext.DatePicker\r
  65      * Defaults to undefined.\r
  66      */\r
  67     <div id="cfg-Ext.ux.grid.filter.DateFilter-minDate"></div>/**\r
  68      * @cfg {Date} minDate\r
  69      * Allowable date as passed to the Ext.DatePicker\r
  70      * Defaults to undefined.\r
  71      */\r
  72     <div id="cfg-Ext.ux.grid.filter.DateFilter-menuItems"></div>/**\r
  73      * @cfg {Array} menuItems\r
  74      * The items to be shown in this menu\r
  75      * Defaults to:<pre>\r
  76      * menuItems : ['before', 'after', '-', 'on'],\r
  77      * </pre>\r
  78      */\r
  79     menuItems : ['before', 'after', '-', 'on'],\r
  80 \r
  81     <div id="cfg-Ext.ux.grid.filter.DateFilter-menuItemCfgs"></div>/**\r
  82      * @cfg {Object} menuItemCfgs\r
  83      * Default configuration options for each menu item\r
  84      */\r
  85     menuItemCfgs : {\r
  86         selectOnFocus: true,\r
  87         width: 125\r
  88     },\r
  89 \r
  90     <div id="cfg-Ext.ux.grid.filter.DateFilter-onText"></div>/**\r
  91      * @cfg {String} onText\r
  92      * Defaults to 'On'.\r
  93      */\r
  94     onText : 'On',\r
  95     \r
  96     <div id="cfg-Ext.ux.grid.filter.DateFilter-pickerOpts"></div>/**\r
  97      * @cfg {Object} pickerOpts\r
  98      * Configuration options for the date picker associated with each field.\r
  99      */\r
 100     pickerOpts : {},\r
 101 \r
 102     /**  \r
 103      * @private\r
 104      * Template method that is to initialize the filter and install required menu items.\r
 105      */\r
 106     init : function (config) {\r
 107         var menuCfg, i, len, item, cfg, Cls;\r
 108 \r
 109         menuCfg = Ext.apply(this.pickerOpts, {\r
 110             minDate: this.minDate, \r
 111             maxDate: this.maxDate, \r
 112             format:  this.dateFormat,\r
 113             listeners: {\r
 114                 scope: this,\r
 115                 select: this.onMenuSelect\r
 116             }\r
 117         });\r
 118 \r
 119         this.fields = {};\r
 120         for (i = 0, len = this.menuItems.length; i < len; i++) {\r
 121             item = this.menuItems[i];\r
 122             if (item !== '-') {\r
 123                 cfg = {\r
 124                     itemId: 'range-' + item,\r
 125                     text: this[item + 'Text'],\r
 126                     menu: new Ext.menu.DateMenu(\r
 127                         Ext.apply(menuCfg, {\r
 128                             itemId: item\r
 129                         })\r
 130                     ),\r
 131                     listeners: {\r
 132                         scope: this,\r
 133                         checkchange: this.onCheckChange\r
 134                     }\r
 135                 };\r
 136                 Cls = Ext.menu.CheckItem;\r
 137                 item = this.fields[item] = new Cls(cfg);\r
 138             }\r
 139             //this.add(item);\r
 140             this.menu.add(item);\r
 141         }\r
 142     },\r
 143 \r
 144     onCheckChange : function () {\r
 145         this.setActive(this.isActivatable());\r
 146         this.fireEvent('update', this);\r
 147     },\r
 148 \r
 149     /**  \r
 150      * @private\r
 151      * Handler method called when there is a keyup event on an input\r
 152      * item of this menu.\r
 153      */\r
 154     onInputKeyUp : function (field, e) {\r
 155         var k = e.getKey();\r
 156         if (k == e.RETURN && field.isValid()) {\r
 157             e.stopEvent();\r
 158             this.menu.hide(true);\r
 159             return;\r
 160         }\r
 161     },\r
 162 \r
 163     <div id="method-Ext.ux.grid.filter.DateFilter-onMenuSelect"></div>/**\r
 164      * Handler for when the menu for a field fires the 'select' event\r
 165      * @param {Object} date\r
 166      * @param {Object} menuItem\r
 167      * @param {Object} value\r
 168      * @param {Object} picker\r
 169      */\r
 170     onMenuSelect : function (menuItem, value, picker) {\r
 171         var fields = this.fields,\r
 172             field = this.fields[menuItem.itemId];\r
 173         \r
 174         field.setChecked(true);\r
 175         \r
 176         if (field == fields.on) {\r
 177             fields.before.setChecked(false, true);\r
 178             fields.after.setChecked(false, true);\r
 179         } else {\r
 180             fields.on.setChecked(false, true);\r
 181             if (field == fields.after && fields.before.menu.picker.value < value) {\r
 182                 fields.before.setChecked(false, true);\r
 183             } else if (field == fields.before && fields.after.menu.picker.value > value) {\r
 184                 fields.after.setChecked(false, true);\r
 185             }\r
 186         }\r
 187         this.fireEvent('update', this);\r
 188     },\r
 189 \r
 190     /**\r
 191      * @private\r
 192      * Template method that is to get and return the value of the filter.\r
 193      * @return {String} The value of this filter\r
 194      */\r
 195     getValue : function () {\r
 196         var key, result = {};\r
 197         for (key in this.fields) {\r
 198             if (this.fields[key].checked) {\r
 199                 result[key] = this.fields[key].menu.picker.getValue();\r
 200             }\r
 201         }\r
 202         return result;\r
 203     },\r
 204 \r
 205     /**\r
 206      * @private\r
 207      * Template method that is to set the value of the filter.\r
 208      * @param {Object} value The value to set the filter\r
 209      * @param {Boolean} preserve true to preserve the checked status\r
 210      * of the other fields.  Defaults to false, unchecking the\r
 211      * other fields\r
 212      */ \r
 213     setValue : function (value, preserve) {\r
 214         var key;\r
 215         for (key in this.fields) {\r
 216             if(value[key]){\r
 217                 this.fields[key].menu.picker.setValue(value[key]);\r
 218                 this.fields[key].setChecked(true);\r
 219             } else if (!preserve) {\r
 220                 this.fields[key].setChecked(false);\r
 221             }\r
 222         }\r
 223         this.fireEvent('update', this);\r
 224     },\r
 225 \r
 226     /**\r
 227      * @private\r
 228      * Template method that is to return <tt>true</tt> if the filter\r
 229      * has enough configuration information to be activated.\r
 230      * @return {Boolean}\r
 231      */\r
 232     isActivatable : function () {\r
 233         var key;\r
 234         for (key in this.fields) {\r
 235             if (this.fields[key].checked) {\r
 236                 return true;\r
 237             }\r
 238         }\r
 239         return false;\r
 240     },\r
 241 \r
 242     /**\r
 243      * @private\r
 244      * Template method that is to get and return serialized filter data for\r
 245      * transmission to the server.\r
 246      * @return {Object/Array} An object or collection of objects containing\r
 247      * key value pairs representing the current configuration of the filter.\r
 248      */\r
 249     getSerialArgs : function () {\r
 250         var args = [];\r
 251         for (var key in this.fields) {\r
 252             if(this.fields[key].checked){\r
 253                 args.push({\r
 254                     type: 'date',\r
 255                     comparison: this.compareMap[key],\r
 256                     value: this.getFieldValue(key).format(this.dateFormat)\r
 257                 });\r
 258             }\r
 259         }\r
 260         return args;\r
 261     },\r
 262 \r
 263     <div id="method-Ext.ux.grid.filter.DateFilter-getFieldValue"></div>/**\r
 264      * Get and return the date menu picker value\r
 265      * @param {String} item The field identifier ('before', 'after', 'on')\r
 266      * @return {Date} Gets the current selected value of the date field\r
 267      */\r
 268     getFieldValue : function(item){\r
 269         return this.fields[item].menu.picker.getValue();\r
 270     },\r
 271     \r
 272     <div id="method-Ext.ux.grid.filter.DateFilter-getPicker"></div>/**\r
 273      * Gets the menu picker associated with the passed field\r
 274      * @param {String} item The field identifier ('before', 'after', 'on')\r
 275      * @return {Object} The menu picker\r
 276      */\r
 277     getPicker : function(item){\r
 278         return this.fields[item].menu.picker;\r
 279     },\r
 280 \r
 281     <div id="method-Ext.ux.grid.filter.DateFilter-validateRecord"></div>/**\r
 282      * Template method that is to validate the provided Ext.data.Record\r
 283      * against the filters configuration.\r
 284      * @param {Ext.data.Record} record The record to validate\r
 285      * @return {Boolean} true if the record is valid within the bounds\r
 286      * of the filter, false otherwise.\r
 287      */\r
 288     validateRecord : function (record) {\r
 289         var key,\r
 290             pickerValue,\r
 291             val = record.get(this.dataIndex);\r
 292             \r
 293         if(!Ext.isDate(val)){\r
 294             return false;\r
 295         }\r
 296         val = val.clearTime(true).getTime();\r
 297         \r
 298         for (key in this.fields) {\r
 299             if (this.fields[key].checked) {\r
 300                 pickerValue = this.getFieldValue(key).clearTime(true).getTime();\r
 301                 if (key == 'before' && pickerValue <= val) {\r
 302                     return false;\r
 303                 }\r
 304                 if (key == 'after' && pickerValue >= val) {\r
 305                     return false;\r
 306                 }\r
 307                 if (key == 'on' && pickerValue != val) {\r
 308                     return false;\r
 309                 }\r
 310             }\r
 311         }\r
 312         return true;\r
 313     }\r
 314 });</pre>
 315 </body>
 316 </html>