examples/docs/source/DateFilter.html

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