examples/ux/grid/filter/StringFilter.js

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