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