examples/docs/source/StringFilter.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.ux.grid.filter.StringFilter"></div>/**
  16  * @class Ext.ux.grid.filter.StringFilter
  17  * @extends Ext.ux.grid.filter.Filter
  18  * Filter by a configurable Ext.form.TextField
  19  * <p><b><u>Example Usage:</u></b></p>
  20  * <pre><code>
  21 var filters = new 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.TextField configs accepted
  33     }]
  34 });
  35  * </code></pre>
  36  */
  37 Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
  38
  39     <div id="cfg-Ext.ux.grid.filter.StringFilter-iconCls"></div>/**
  40      * @cfg {String} iconCls
  41      * The iconCls to be applied to the menu item.
  42      * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
  43      */
  44     iconCls : 'ux-gridfilter-text-icon',
  45
  46     emptyText: 'Enter Filter Text...',
  47     selectOnFocus: true,
  48     width: 125,
  49
  50     /**
  51      * @private
  52      * Template method that is to initialize the filter and install required menu items.
  53      */
  54     init : function (config) {
  55         Ext.applyIf(config, {
  56             enableKeyEvents: true,
  57             iconCls: this.iconCls,
  58             listeners: {
  59                 scope: this,
  60                 keyup: this.onInputKeyUp
  61             }
  62         });
  63
  64         this.inputItem = new Ext.form.TextField(config);
  65         this.menu.add(this.inputItem);
  66         this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
  67     },
  68
  69     /**
  70      * @private
  71      * Template method that is to get and return the value of the filter.
  72      * @return {String} The value of this filter
  73      */
  74     getValue : function () {
  75         return this.inputItem.getValue();
  76     },
  77
  78     /**
  79      * @private
  80      * Template method that is to set the value of the filter.
  81      * @param {Object} value The value to set the filter
  82      */
  83     setValue : function (value) {
  84         this.inputItem.setValue(value);
  85         this.fireEvent('update', this);
  86     },
  87
  88     /**
  89      * @private
  90      * Template method that is to return <tt>true</tt> if the filter
  91      * has enough configuration information to be activated.
  92      * @return {Boolean}
  93      */
  94     isActivatable : function () {
  95         return this.inputItem.getValue().length > 0;
  96     },
  97
  98     /**
  99      * @private
 100      * Template method that is to get and return serialized filter data for
 101      * transmission to the server.
 102      * @return {Object/Array} An object or collection of objects containing
 103      * key value pairs representing the current configuration of the filter.
 104      */
 105     getSerialArgs : function () {
 106         return {type: 'string', value: this.getValue()};
 107     },
 108
 109     <div id="method-Ext.ux.grid.filter.StringFilter-validateRecord"></div>/**
 110      * Template method that is to validate the provided Ext.data.Record
 111      * against the filters configuration.
 112      * @param {Ext.data.Record} record The record to validate
 113      * @return {Boolean} true if the record is valid within the bounds
 114      * of the filter, false otherwise.
 115      */
 116     validateRecord : function (record) {
 117         var val = record.get(this.dataIndex);
 118
 119         if(typeof val != 'string') {
 120             return (this.getValue().length === 0);
 121         }
 122
 123         return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
 124     },
 125
 126     /**
 127      * @private
 128      * Handler method called when there is a keyup event on this.inputItem
 129      */
 130     onInputKeyUp : function (field, e) {
 131         var k = e.getKey();
 132         if (k == e.RETURN && field.isValid()) {
 133             e.stopEvent();
 134             this.menu.hide(true);
 135             return;
 136         }
 137         // restart the timer
 138         this.updateTask.delay(this.updateBuffer);
 139     }
 140 });
 141 </pre>
 142 </body>
 143 </html>