examples/ux/grid/filter/StringFilter.js

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