NumericFilter.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:6k
源码类别:

JavaScript

开发平台:

JavaScript

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