examples/ux/gridfilters/filter/NumericFilter.js

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