examples/ux/gridfilters/filter/NumericFilter.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /** \r
   8  * @class Ext.ux.grid.filter.NumericFilter\r
   9  * @extends Ext.ux.grid.filter.Filter\r
  10  * Filters using an Ext.ux.menu.RangeMenu.\r
  11  * <p><b><u>Example Usage:</u></b></p>\r
  12  * <pre><code>    \r
  13 var filters = new Ext.ux.grid.GridFilters({\r
  14     ...\r
  15     filters: [{\r
  16         type: 'numeric',\r
  17         dataIndex: 'price'\r
  18     }]\r
  19 });\r
  20  * </code></pre> \r
  21  */\r
  22 Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
  23 \r
  24     /**\r
  25      * @cfg {Object} fieldCls\r
  26      * The Class to use to construct each field item within this menu\r
  27      * Defaults to:<pre>\r
  28      * fieldCls : Ext.form.NumberField\r
  29      * </pre>\r
  30      */\r
  31     fieldCls : Ext.form.NumberField,\r
  32     /**\r
  33      * @cfg {Object} fieldCfg\r
  34      * The default configuration options for any field item unless superseded\r
  35      * by the <code>{@link #fields}</code> configuration.\r
  36      * Defaults to:<pre>\r
  37      * fieldCfg : {}\r
  38      * </pre>\r
  39      * Example usage:\r
  40      * <pre><code>\r
  41 fieldCfg : {\r
  42     width: 150,\r
  43 },\r
  44      * </code></pre>\r
  45      */\r
  46     /**\r
  47      * @cfg {Object} fields\r
  48      * The field items may be configured individually\r
  49      * Defaults to <tt>undefined</tt>.\r
  50      * Example usage:\r
  51      * <pre><code>\r
  52 fields : {\r
  53     gt: { // override fieldCfg options\r
  54         width: 200,\r
  55         fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}\r
  56     }\r
  57 },\r
  58      * </code></pre>\r
  59      */\r
  60     /**\r
  61      * @cfg {Object} iconCls\r
  62      * The iconCls to be applied to each comparator field item.\r
  63      * Defaults to:<pre>\r
  64 iconCls : {\r
  65     gt : 'ux-rangemenu-gt',\r
  66     lt : 'ux-rangemenu-lt',\r
  67     eq : 'ux-rangemenu-eq'\r
  68 }\r
  69      * </pre>\r
  70      */\r
  71     iconCls : {\r
  72         gt : 'ux-rangemenu-gt',\r
  73         lt : 'ux-rangemenu-lt',\r
  74         eq : 'ux-rangemenu-eq'\r
  75     },\r
  76 \r
  77     /**\r
  78      * @cfg {Object} menuItemCfgs\r
  79      * Default configuration options for each menu item\r
  80      * Defaults to:<pre>\r
  81 menuItemCfgs : {\r
  82     emptyText: 'Enter Filter Text...',\r
  83     selectOnFocus: true,\r
  84     width: 125\r
  85 }\r
  86      * </pre>\r
  87      */\r
  88     menuItemCfgs : {\r
  89         emptyText: 'Enter Filter Text...',\r
  90         selectOnFocus: true,\r
  91         width: 125\r
  92     },\r
  93 \r
  94     /**\r
  95      * @cfg {Array} menuItems\r
  96      * The items to be shown in this menu.  Items are added to the menu\r
  97      * according to their position within this array. Defaults to:<pre>\r
  98      * menuItems : ['lt','gt','-','eq']\r
  99      * </pre>\r
 100      */\r
 101     menuItems : ['lt', 'gt', '-', 'eq'],\r
 102 \r
 103     /**  \r
 104      * @private\r
 105      * Template method that is to initialize the filter and install required menu items.\r
 106      */\r
 107     init : function (config) {\r
 108         // if a menu already existed, do clean up first\r
 109         if (this.menu){\r
 110             this.menu.destroy();\r
 111         }        \r
 112         this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {\r
 113             // pass along filter configs to the menu\r
 114             fieldCfg : this.fieldCfg || {},\r
 115             fieldCls : this.fieldCls,\r
 116             fields : this.fields || {},\r
 117             iconCls: this.iconCls,\r
 118             menuItemCfgs: this.menuItemCfgs,\r
 119             menuItems: this.menuItems,\r
 120             updateBuffer: this.updateBuffer\r
 121         }));\r
 122         // relay the event fired by the menu\r
 123         this.menu.on('update', this.fireUpdate, this);\r
 124     },\r
 125     \r
 126     /**\r
 127      * @private\r
 128      * Template method that is to get and return the value of the filter.\r
 129      * @return {String} The value of this filter\r
 130      */\r
 131     getValue : function () {\r
 132         return this.menu.getValue();\r
 133     },\r
 134 \r
 135     /**\r
 136      * @private\r
 137      * Template method that is to set the value of the filter.\r
 138      * @param {Object} value The value to set the filter\r
 139      */ \r
 140     setValue : function (value) {\r
 141         this.menu.setValue(value);\r
 142     },\r
 143 \r
 144     /**\r
 145      * @private\r
 146      * Template method that is to return <tt>true</tt> if the filter\r
 147      * has enough configuration information to be activated.\r
 148      * @return {Boolean}\r
 149      */\r
 150     isActivatable : function () {\r
 151         var values = this.getValue();\r
 152         for (key in values) {\r
 153             if (values[key] !== undefined) {\r
 154                 return true;\r
 155             }\r
 156         }\r
 157         return false;\r
 158     },\r
 159     \r
 160     /**\r
 161      * @private\r
 162      * Template method that is to get and return serialized filter data for\r
 163      * transmission to the server.\r
 164      * @return {Object/Array} An object or collection of objects containing\r
 165      * key value pairs representing the current configuration of the filter.\r
 166      */\r
 167     getSerialArgs : function () {\r
 168         var key,\r
 169             args = [],\r
 170             values = this.menu.getValue();\r
 171         for (key in values) {\r
 172             args.push({\r
 173                 type: 'numeric',\r
 174                 comparison: key,\r
 175                 value: values[key]\r
 176             });\r
 177         }\r
 178         return args;\r
 179     },\r
 180 \r
 181     /**\r
 182      * Template method that is to validate the provided Ext.data.Record\r
 183      * against the filters configuration.\r
 184      * @param {Ext.data.Record} record The record to validate\r
 185      * @return {Boolean} true if the record is valid within the bounds\r
 186      * of the filter, false otherwise.\r
 187      */\r
 188     validateRecord : function (record) {\r
 189         var val = record.get(this.dataIndex),\r
 190             values = this.getValue();\r
 191         if (values.eq !== undefined && val != values.eq) {\r
 192             return false;\r
 193         }\r
 194         if (values.lt !== undefined && val >= values.lt) {\r
 195             return false;\r
 196         }\r
 197         if (values.gt !== undefined && val <= values.gt) {\r
 198             return false;\r
 199         }\r
 200         return true;\r
 201     }\r
 202 });