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