4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.form.TriggerField
14 * @extends Roo.form.TextField
15 * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
16 * The trigger has no default action, so you must assign a function to implement the trigger click handler by
17 * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
18 * for which you can provide a custom implementation. For example:
20 var trigger = new Roo.form.TriggerField();
21 trigger.onTriggerClick = myTriggerFn;
22 trigger.applyTo('my-field');
25 * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
26 * {@link Roo.form.DateField} and {@link Roo.form.ComboBox} are perfect examples of this.
27 * @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
28 * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
30 * Create a new TriggerField.
31 * @param {Object} config Configuration options (valid {@Roo.form.TextField} config options will also be applied
32 * to the base TextField)
34 Roo.form.TriggerField = function(config){
35 this.mimicing = false;
36 Roo.form.TriggerField.superclass.constructor.call(this, config);
39 Roo.extend(Roo.form.TriggerField, Roo.form.TextField, {
41 * @cfg {String} triggerClass A CSS class to apply to the trigger
44 * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
45 * {tag: "input", type: "text", size: "16", autocomplete: "off"})
47 defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
49 * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
53 /** @cfg {Boolean} grow @hide */
54 /** @cfg {Number} growMin @hide */
55 /** @cfg {Number} growMax @hide */
61 autoSize: Roo.emptyFn,
70 onResize : function(w, h){
71 Roo.form.TriggerField.superclass.onResize.apply(this, arguments);
72 if(typeof w == 'number'){
73 var x = w - this.trigger.getWidth();
74 this.el.setWidth(this.adjustWidth('input', x));
75 this.trigger.setStyle('left', x+'px');
80 adjustSize : Roo.BoxComponent.prototype.adjustSize,
83 getResizeEl : function(){
88 getPositionEl : function(){
93 alignErrorIcon : function(){
94 this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
98 onRender : function(ct, position){
99 Roo.form.TriggerField.superclass.onRender.call(this, ct, position);
100 this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
101 this.trigger = this.wrap.createChild(this.triggerConfig ||
102 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
103 if(this.hideTrigger){
104 this.trigger.setDisplayed(false);
108 this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
113 initTrigger : function(){
114 this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
115 this.trigger.addClassOnOver('x-form-trigger-over');
116 this.trigger.addClassOnClick('x-form-trigger-click');
120 onDestroy : function(){
122 this.trigger.removeAllListeners();
123 this.trigger.remove();
128 Roo.form.TriggerField.superclass.onDestroy.call(this);
132 onFocus : function(){
133 Roo.form.TriggerField.superclass.onFocus.call(this);
135 this.wrap.addClass('x-trigger-wrap-focus');
136 this.mimicing = true;
137 Roo.get(Roo.isIE ? document.body : document).on("mousedown", this.mimicBlur, this);
139 this.el.on("keydown", this.checkTab, this);
145 checkTab : function(e){
146 if(e.getKey() == e.TAB){
157 mimicBlur : function(e, t){
158 if(!this.wrap.contains(t) && this.validateBlur()){
164 triggerBlur : function(){
165 this.mimicing = false;
166 Roo.get(Roo.isIE ? document.body : document).un("mousedown", this.mimicBlur);
168 this.el.un("keydown", this.checkTab, this);
170 this.wrap.removeClass('x-trigger-wrap-focus');
171 Roo.form.TriggerField.superclass.onBlur.call(this);
175 // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
176 validateBlur : function(e, t){
181 onDisable : function(){
182 Roo.form.TriggerField.superclass.onDisable.call(this);
184 this.wrap.addClass('x-item-disabled');
189 onEnable : function(){
190 Roo.form.TriggerField.superclass.onEnable.call(this);
192 this.wrap.removeClass('x-item-disabled');
198 var ae = this.getActionEl();
201 ae.dom.style.display = '';
202 ae.dom.style.visibility = 'visible';
209 var ae = this.getActionEl();
210 ae.dom.style.display = 'none';
214 * The function that should handle the trigger's click event. This method does nothing by default until overridden
215 * by an implementing function.
217 * @param {EventObject} e
219 onTriggerClick : Roo.emptyFn
222 // TwinTriggerField is not a public class to be used directly. It is meant as an abstract base class
223 // to be extended by an implementing class. For an example of implementing this class, see the custom
224 // SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
225 Roo.form.TwinTriggerField = Roo.extend(Roo.form.TriggerField, {
226 initComponent : function(){
227 Roo.form.TwinTriggerField.superclass.initComponent.call(this);
229 this.triggerConfig = {
230 tag:'span', cls:'x-form-twin-triggers', cn:[
231 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
232 {tag: "img", src: Roo.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
236 getTrigger : function(index){
237 return this.triggers[index];
240 initTrigger : function(){
241 var ts = this.trigger.select('.x-form-trigger', true);
242 this.wrap.setStyle('overflow', 'hidden');
243 var triggerField = this;
244 ts.each(function(t, all, index){
246 var w = triggerField.wrap.getWidth();
247 this.dom.style.display = 'none';
248 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
251 var w = triggerField.wrap.getWidth();
252 this.dom.style.display = '';
253 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
255 var triggerIndex = 'Trigger'+(index+1);
257 if(this['hide'+triggerIndex]){
258 t.dom.style.display = 'none';
260 t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
261 t.addClassOnOver('x-form-trigger-over');
262 t.addClassOnClick('x-form-trigger-click');
264 this.triggers = ts.elements;
267 onTrigger1Click : Roo.emptyFn,
268 onTrigger2Click : Roo.emptyFn