Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>