1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them
*
* @author Ing. Jozef Sakalos
* @copyright (c) 2008, by Ing. Jozef Sakalos
* @date 17. January 2008
* @version $Id$
*
* @license Ext.ux.grid.Search is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
Ext.namespace('Ext.ux', 'Ext.ux.grid');
/**
* @class Ext.ux.grid.Search
* @extends Ext.util.Observable
* @param {Object} config configuration object
* @constructor
*/
Ext.ux.grid.Search = function(config) {
Ext.apply(this, config);
Ext.ux.grid.Search.superclass.constructor.call(this);
}; // eo constructor
Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {
/**
* @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip
*/
searchTipText:'Type a text to search and press Enter'
/**
* @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom)
* Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[]
* for position bottom. Plugin does NOT create any toolbar.
*/
,position:'top'
/**
* @cfg {Number} width Width of input field in pixels (defaults to 100)
*/
,width:100
/**
* @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it
*/
,xtype:'gridsearch'
/**
* @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}
*/
,paramNames: {
fields:'fields'
,query:'query'
,all:'search'
,cmd:'search'
}
/**
* @cfg {int} position
* The starting position inside the toolbar
*/
,tbPosition: 15
/**
* @cfg {Number} minLength force user to type this many character before he can make a search
*/
,minLength:2
// {{{
/**
* private
* @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for
*/
,init:function(grid) {
this.grid = grid;
// do our processing after grid render
grid.onRender = grid.onRender.createSequence(this.onRender, this);
} // eo function init
// }}}
// {{{
/**
* private add plugin controls to <b>existing</b> toolbar
*/
,onRender:function() {
var grid = this.grid;
var tb;
if('bottom' == this.position) {
tb = grid.bottomToolbar;
} else if ('owner' == this.position) {
tb = grid.ownerCt.topToolbar;
} else {
tb = grid.topToolbar;
}
tb.insert(this.tbPosition, '-');
this.tbPosition++;
// add input field (TwinTriggerField in fact)
this.field = new Ext.form.TwinTriggerField({
width:this.width
,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus
,trigger1Class:'x-form-clear-trigger'
,trigger2Class:'x-form-search-trigger'
,onTrigger1Click:this.onTriggerClear.createDelegate(this)
,onTrigger2Click:this.onTriggerSearch.createDelegate(this)
,minLength:this.minLength
});
// install event handlers on input field
this.field.on('render', function() {
this.field.el.dom.qtip = this.searchTipText;
// install key map
var map = new Ext.KeyMap(this.field.el, [{
key:Ext.EventObject.ENTER
,scope:this
,fn:this.onTriggerSearch
},{
key:Ext.EventObject.ESC
,scope:this
,fn:this.onTriggerClear
}]);
map.stopEvent = true;
}, this, {single:true});
tb.insert(this.tbPosition, this.field);
} // eo function onRender
// }}}
// {{{
/**
* private Clear Trigger click handler
*/
,onTriggerClear:function() {
this.field.setValue('');
this.field.focus();
this.onTriggerSearch();
} // eo function onTriggerClear
// }}}
// {{{
/**
* private Search Trigger click handler (executes the search, local or remote)
*/
,onTriggerSearch:function() {
if(!this.field.isValid()) {
return;
}
var val = this.field.getValue();
var store = this.grid.store;
// ask server to filter records
// clear start (necessary if we have paging)
if(store.lastOptions && store.lastOptions.params) {
store.lastOptions.params[store.paramNames.start] = 0;
}
// add fields and query to baseParams of store
delete(store.baseParams[this.paramNames.fields]);
delete(store.baseParams[this.paramNames.query]);
if (store.lastOptions && store.lastOptions.params) {
delete(store.lastOptions.params[this.paramNames.fields]);
delete(store.lastOptions.params[this.paramNames.query]);
}
if(val && val.length) {
store.baseParams[this.paramNames.fields] = this.paramNames.cmd;
store.baseParams[this.paramNames.query] = val;
} else {
store.baseParams[this.paramNames.fields] = this.paramNames.all;
if(this.paramNames.defdata) {
store.baseParams[this.paramNames.query] = this.paramNames.defdata;
}
}
// reload store
store.reload();
} // eo function onTriggerSearch
// }}}
// {{{
/**
* @param {Boolean} true to disable search (TwinTriggerField), false to enable
*/
,setDisabled:function() {
this.field.setDisabled.apply(this.field, arguments);
} // eo function setDisabled
// }}}
// {{{
/**
* Enable search (TwinTriggerField)
*/
,enable:function() {
this.setDisabled(false);
} // eo function enable
// }}}
// {{{
/**
* Enable search (TwinTriggerField)
*/
,disable:function() {
this.setDisabled(true);
} // eo function disable
/**
* get value of search field
*/
,getValue:function() {
return this.field.isValid() ? this.field.getValue() : null;
} // eo function disable
// }}}
}); // eo extend
// eof
|
