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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
<div id="cls-Ext.form.TriggerField"></div>/**
* @class Ext.form.TriggerField
* @extends Ext.form.TextField
* Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
* The trigger has no default action, so you must assign a function to implement the trigger click handler by
* overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
* for which you can provide a custom implementation. For example:
* <pre><code>
var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');
</code></pre>
*
* However, in general you will most likely want to use TriggerField as the base class for a reusable component.
* {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
*
* @constructor
* Create a new TriggerField.
* @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
* to the base TextField)
* @xtype trigger
*/
Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
<div id="cfg-Ext.form.TriggerField-triggerClass"></div>/**
* @cfg {String} triggerClass
* An additional CSS class used to style the trigger button. The trigger will always get the
* class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
*/
<div id="cfg-Ext.form.TriggerField-triggerConfig"></div>/**
* @cfg {Mixed} triggerConfig
* <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the
* trigger element for this Field. (Optional).</p>
* <p>Specify this when you need a customized element to act as the trigger button for a TriggerField.</p>
* <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning
* and appearance of the trigger. Defaults to:</p>
* <pre><code>{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}</code></pre>
*/
<div id="cfg-Ext.form.TriggerField-autoCreate"></div>/**
* @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
* element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
* See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>
* <pre><code>{tag: "input", type: "text", size: "16", autocomplete: "off"}</code></pre>
*/
defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
<div id="cfg-Ext.form.TriggerField-hideTrigger"></div>/**
* @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base
* text field (defaults to <tt>false</tt>)
*/
hideTrigger:false,
<div id="cfg-Ext.form.TriggerField-editable"></div>/**
* @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field,
* the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>).
*/
editable: true,
<div id="cfg-Ext.form.TriggerField-readOnly"></div>/**
* @cfg {Boolean} readOnly <tt>true</tt> to prevent the user from changing the field, and
* hides the trigger. Superceeds the editable and hideTrigger options if the value is true.
* (defaults to <tt>false</tt>)
*/
readOnly: false,
<div id="cfg-Ext.form.TriggerField-wrapFocusClass"></div>/**
* @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
* <tt>x-trigger-wrap-focus</tt>.
*/
wrapFocusClass: 'x-trigger-wrap-focus',
<div id="method-Ext.form.TriggerField-autoSize"></div>/**
* @hide
* @method autoSize
*/
autoSize: Ext.emptyFn,
// private
monitorTab : true,
// private
deferHeight : true,
// private
mimicing : false,
actionMode: 'wrap',
defaultTriggerWidth: 17,
// private
onResize : function(w, h){
Ext.form.TriggerField.superclass.onResize.call(this, w, h);
var tw = this.getTriggerWidth();
if(Ext.isNumber(w)){
this.el.setWidth(w - tw);
}
this.wrap.setWidth(this.el.getWidth() + tw);
},
getTriggerWidth: function(){
var tw = this.trigger.getWidth();
if(!this.hideTrigger && !this.readOnly && tw === 0){
tw = this.defaultTriggerWidth;
}
return tw;
},
// private
alignErrorIcon : function(){
if(this.wrap){
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
}
},
// private
onRender : function(ct, position){
this.doc = Ext.isIE ? Ext.getBody() : Ext.getDoc();
Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
this.trigger = this.wrap.createChild(this.triggerConfig ||
{tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.triggerClass});
this.initTrigger();
if(!this.width){
this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
}
this.resizeEl = this.positionEl = this.wrap;
},
getWidth: function() {
return(this.el.getWidth() + this.trigger.getWidth());
},
updateEditState: function(){
if(this.rendered){
if (this.readOnly) {
this.el.dom.readOnly = true;
this.el.addClass('x-trigger-noedit');
this.mun(this.el, 'click', this.onTriggerClick, this);
this.trigger.setDisplayed(false);
} else {
if (!this.editable) {
this.el.dom.readOnly = true;
this.el.addClass('x-trigger-noedit');
this.mon(this.el, 'click', this.onTriggerClick, this);
} else {
this.el.dom.readOnly = false;
this.el.removeClass('x-trigger-noedit');
this.mun(this.el, 'click', this.onTriggerClick, this);
}
this.trigger.setDisplayed(!this.hideTrigger);
}
this.onResize(this.width || this.wrap.getWidth());
}
},
<div id="method-Ext.form.TriggerField-setHideTrigger"></div>/**
* Changes the hidden status of the trigger.
* @param {Boolean} hideTrigger True to hide the trigger, false to show it.
*/
setHideTrigger: function(hideTrigger){
if(hideTrigger != this.hideTrigger){
this.hideTrigger = hideTrigger;
this.updateEditState();
}
},
<div id="method-Ext.form.TriggerField-setEditable"></div>/**
* Allow or prevent the user from directly editing the field text. If false is passed,
* the user will only be able to modify the field using the trigger. Will also add
* a click event to the text field which will call the trigger. This method
* is the runtime equivalent of setting the {@link #editable} config option at config time.
* @param {Boolean} value True to allow the user to directly edit the field text.
*/
setEditable: function(editable){
if(editable != this.editable){
this.editable = editable;
this.updateEditState();
}
},
<div id="method-Ext.form.TriggerField-setReadOnly"></div>/**
* Setting this to true will supersede settings {@link #editable} and {@link #hideTrigger}.
* Setting this to false will defer back to {@link #editable} and {@link #hideTrigger}. This method
* is the runtime equivalent of setting the {@link #readOnly} config option at config time.
* @param {Boolean} value True to prevent the user changing the field and explicitly
* hide the trigger.
*/
setReadOnly: function(readOnly){
if(readOnly != this.readOnly){
this.readOnly = readOnly;
this.updateEditState();
}
},
afterRender : function(){
Ext.form.TriggerField.superclass.afterRender.call(this);
this.updateEditState();
},
// private
initTrigger : function(){
this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
this.trigger.addClassOnOver('x-form-trigger-over');
this.trigger.addClassOnClick('x-form-trigger-click');
},
// private
onDestroy : function(){
Ext.destroy(this.trigger, this.wrap);
if (this.mimicing){
this.doc.un('mousedown', this.mimicBlur, this);
}
delete this.doc;
Ext.form.TriggerField.superclass.onDestroy.call(this);
},
// private
onFocus : function(){
Ext.form.TriggerField.superclass.onFocus.call(this);
if(!this.mimicing){
this.wrap.addClass(this.wrapFocusClass);
this.mimicing = true;
this.doc.on('mousedown', this.mimicBlur, this, {delay: 10});
if(this.monitorTab){
this.on('specialkey', this.checkTab, this);
}
}
},
// private
checkTab : function(me, e){
if(e.getKey() == e.TAB){
this.triggerBlur();
}
},
// private
onBlur : Ext.emptyFn,
// private
mimicBlur : function(e){
if(!this.isDestroyed && !this.wrap.contains(e.target) && this.validateBlur(e)){
this.triggerBlur();
}
},
// private
triggerBlur : function(){
this.mimicing = false;
this.doc.un('mousedown', this.mimicBlur, this);
if(this.monitorTab && this.el){
this.un('specialkey', this.checkTab, this);
}
Ext.form.TriggerField.superclass.onBlur.call(this);
if(this.wrap){
this.wrap.removeClass(this.wrapFocusClass);
}
},
beforeBlur : Ext.emptyFn,
// private
// This should be overriden by any subclass that needs to check whether or not the field can be blurred.
validateBlur : function(e){
return true;
},
<div id="method-Ext.form.TriggerField-onTriggerClick"></div>/**
* The function that should handle the trigger's click event. This method does nothing by default
* until overridden by an implementing function. See Ext.form.ComboBox and Ext.form.DateField for
* sample implementations.
* @method
* @param {EventObject} e
*/
onTriggerClick : Ext.emptyFn
<div id="cfg-Ext.form.TriggerField-grow"></div>/**
* @cfg {Boolean} grow @hide
*/
<div id="cfg-Ext.form.TriggerField-growMin"></div>/**
* @cfg {Number} growMin @hide
*/
<div id="cfg-Ext.form.TriggerField-growMax"></div>/**
* @cfg {Number} growMax @hide
*/
});
<div id="cls-Ext.form.TwinTriggerField"></div>/**
* @class Ext.form.TwinTriggerField
* @extends Ext.form.TriggerField
* TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
* to be extended by an implementing class. For an example of implementing this class, see the custom
* SearchField implementation here:
* <a href="http://extjs.com/deploy/ext/examples/form/custom.html">http://extjs.com/deploy/ext/examples/form/custom.html</a>
*/
Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
<div id="cfg-Ext.form.TwinTriggerField-triggerConfig"></div>/**
* @cfg {Mixed} triggerConfig
* <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements
* for this Field. (Optional).</p>
* <p>Specify this when you need a customized element to contain the two trigger elements for this Field.
* Each trigger element must be marked by the CSS class <tt>x-form-trigger</tt> (also see
* <tt>{@link #trigger1Class}</tt> and <tt>{@link #trigger2Class}</tt>).</p>
* <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing,
* positioning and appearance of the triggers.</p>
*/
<div id="cfg-Ext.form.TwinTriggerField-trigger1Class"></div>/**
* @cfg {String} trigger1Class
* An additional CSS class used to style the trigger button. The trigger will always get the
* class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
*/
<div id="cfg-Ext.form.TwinTriggerField-trigger2Class"></div>/**
* @cfg {String} trigger2Class
* An additional CSS class used to style the trigger button. The trigger will always get the
* class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
*/
initComponent : function(){
Ext.form.TwinTriggerField.superclass.initComponent.call(this);
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.trigger2Class}
]};
},
getTrigger : function(index){
return this.triggers[index];
},
afterRender: function(){
Ext.form.TwinTriggerField.superclass.afterRender.call(this);
var triggers = this.triggers,
i = 0,
len = triggers.length;
for(; i < len; ++i){
if(this['hideTrigger' + (i + 1)]){
triggers[i].hide();
}
}
},
initTrigger : function(){
var ts = this.trigger.select('.x-form-trigger', true),
triggerField = this;
ts.each(function(t, all, index){
var triggerIndex = 'Trigger'+(index+1);
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
triggerField['hidden' + triggerIndex] = true;
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
triggerField['hidden' + triggerIndex] = false;
};
this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
}, this);
this.triggers = ts.elements;
},
getTriggerWidth: function(){
var tw = 0;
Ext.each(this.triggers, function(t, index){
var triggerIndex = 'Trigger' + (index + 1),
w = t.getWidth();
if(w === 0 && !this['hidden' + triggerIndex]){
tw += this.defaultTriggerWidth;
}else{
tw += w;
}
}, this);
return tw;
},
// private
onDestroy : function() {
Ext.destroy(this.triggers);
Ext.form.TwinTriggerField.superclass.onDestroy.call(this);
},
<div id="method-Ext.form.TwinTriggerField-onTrigger1Click"></div>/**
* The function that should handle the trigger's click event. This method does nothing by default
* until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
* for additional information.
* @method
* @param {EventObject} e
*/
onTrigger1Click : Ext.emptyFn,
<div id="method-Ext.form.TwinTriggerField-onTrigger2Click"></div>/**
* The function that should handle the trigger's click event. This method does nothing by default
* until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
* for additional information.
* @method
* @param {EventObject} e
*/
onTrigger2Click : Ext.emptyFn
});
Ext.reg('trigger', Ext.form.TriggerField);
</pre>
</body>
</html>
|
