examples/ux/gridfilters/filter/StringFilter.js

   1 /*!
   2  * Ext JS Library 3.0.3
   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.StringFilter\r
   9  * @extends Ext.ux.grid.filter.Filter\r
  10  * Filter by a configurable Ext.form.TextField\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         // required configs\r
  17         type: 'string',\r
  18         dataIndex: 'name',\r
  19         \r
  20         // optional configs\r
  21         value: 'foo',\r
  22         active: true, // default is false\r
  23         iconCls: 'ux-gridfilter-text-icon' // default\r
  24         // any Ext.form.TextField configs accepted\r
  25     }]\r
  26 });\r
  27  * </code></pre>\r
  28  */\r
  29 Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {\r
  30 \r
  31     /**\r
  32      * @cfg {String} iconCls\r
  33      * The iconCls to be applied to the menu item.\r
  34      * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.\r
  35      */\r
  36     iconCls : 'ux-gridfilter-text-icon',\r
  37 \r
  38     emptyText: 'Enter Filter Text...',\r
  39     selectOnFocus: true,\r
  40     width: 125,\r
  41     \r
  42     /**  \r
  43      * @private\r
  44      * Template method that is to initialize the filter and install required menu items.\r
  45      */\r
  46     init : function (config) {\r
  47         Ext.applyIf(config, {\r
  48             enableKeyEvents: true,\r
  49             iconCls: this.iconCls,\r
  50             listeners: {\r
  51                 scope: this,\r
  52                 keyup: this.onInputKeyUp\r
  53             }\r
  54         });\r
  55 \r
  56         this.inputItem = new Ext.form.TextField(config); \r
  57         this.menu.add(this.inputItem);\r
  58         this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);\r
  59     },\r
  60     \r
  61     /**\r
  62      * @private\r
  63      * Template method that is to get and return the value of the filter.\r
  64      * @return {String} The value of this filter\r
  65      */\r
  66     getValue : function () {\r
  67         return this.inputItem.getValue();\r
  68     },\r
  69     \r
  70     /**\r
  71      * @private\r
  72      * Template method that is to set the value of the filter.\r
  73      * @param {Object} value The value to set the filter\r
  74      */ \r
  75     setValue : function (value) {\r
  76         this.inputItem.setValue(value);\r
  77         this.fireEvent('update', this);\r
  78     },\r
  79 \r
  80     /**\r
  81      * @private\r
  82      * Template method that is to return <tt>true</tt> if the filter\r
  83      * has enough configuration information to be activated.\r
  84      * @return {Boolean}\r
  85      */\r
  86     isActivatable : function () {\r
  87         return this.inputItem.getValue().length > 0;\r
  88     },\r
  89 \r
  90     /**\r
  91      * @private\r
  92      * Template method that is to get and return serialized filter data for\r
  93      * transmission to the server.\r
  94      * @return {Object/Array} An object or collection of objects containing\r
  95      * key value pairs representing the current configuration of the filter.\r
  96      */\r
  97     getSerialArgs : function () {\r
  98         return {type: 'string', value: this.getValue()};\r
  99     },\r
 100 \r
 101     /**\r
 102      * Template method that is to validate the provided Ext.data.Record\r
 103      * against the filters configuration.\r
 104      * @param {Ext.data.Record} record The record to validate\r
 105      * @return {Boolean} true if the record is valid within the bounds\r
 106      * of the filter, false otherwise.\r
 107      */\r
 108     validateRecord : function (record) {\r
 109         var val = record.get(this.dataIndex);\r
 110 \r
 111         if(typeof val != 'string') {\r
 112             return (this.getValue().length === 0);\r
 113         }\r
 114 \r
 115         return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;\r
 116     },\r
 117     \r
 118     /**  \r
 119      * @private\r
 120      * Handler method called when there is a keyup event on this.inputItem\r
 121      */\r
 122     onInputKeyUp : function (field, e) {\r
 123         var k = e.getKey();\r
 124         if (k == e.RETURN && field.isValid()) {\r
 125             e.stopEvent();\r
 126             this.menu.hide(true);\r
 127             return;\r
 128         }\r
 129         // restart the timer\r
 130         this.updateTask.delay(this.updateBuffer);\r
 131     }\r
 132 });\r