source: trunk/web/addons/job_monarch/lib/extjs/source/widgets/form/TriggerField.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

  • added new AJAX dependancies: ExtJS, pChart, Lightbox2
File size: 9.0 KB
Line 
1/*
2 * Ext JS Library 2.2.1
3 * Copyright(c) 2006-2009, Ext JS, LLC.
4 * licensing@extjs.com
5 *
6 * http://extjs.com/license
7 */
8
9/**
10 * @class Ext.form.TriggerField
11 * @extends Ext.form.TextField
12 * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
13 * The trigger has no default action, so you must assign a function to implement the trigger click handler by
14 * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
15 * for which you can provide a custom implementation.  For example:
16 * <pre><code>
17var trigger = new Ext.form.TriggerField();
18trigger.onTriggerClick = myTriggerFn;
19trigger.applyToMarkup('my-field');
20</code></pre>
21 *
22 * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
23 * {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
24 * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
25 * class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
26 * @constructor
27 * Create a new TriggerField.
28 * @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
29 * to the base TextField)
30 */
31Ext.form.TriggerField = Ext.extend(Ext.form.TextField,  {
32    /**
33     * @cfg {String} triggerClass A CSS class to apply to the trigger
34     */
35    /**
36     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
37     * {tag: "input", type: "text", size: "16", autocomplete: "off"})
38     */
39    defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
40    /**
41     * @cfg {Boolean} hideTrigger True to hide the trigger element and display only the base text field (defaults to false)
42     */
43    hideTrigger:false,
44
45    /**
46     * @hide
47     * @method autoSize
48     */
49    autoSize: Ext.emptyFn,
50    // private
51    monitorTab : true,
52    // private
53    deferHeight : true,
54    // private
55    mimicing : false,
56
57    // private
58    onResize : function(w, h){
59        Ext.form.TriggerField.superclass.onResize.call(this, w, h);
60        if(typeof w == 'number'){
61            this.el.setWidth(this.adjustWidth('input', w - this.trigger.getWidth()));
62        }
63        this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
64    },
65
66    // private
67    adjustSize : Ext.BoxComponent.prototype.adjustSize,
68
69    // private
70    getResizeEl : function(){
71        return this.wrap;
72    },
73
74    // private
75    getPositionEl : function(){
76        return this.wrap;
77    },
78
79    // private
80    alignErrorIcon : function(){
81        if(this.wrap){
82            this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
83        }
84    },
85
86    // private
87    onRender : function(ct, position){
88        Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
89        this.wrap = this.el.wrap({cls: "x-form-field-wrap"});
90        this.trigger = this.wrap.createChild(this.triggerConfig ||
91                {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
92        if(this.hideTrigger){
93            this.trigger.setDisplayed(false);
94        }
95        this.initTrigger();
96        if(!this.width){
97            this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
98        }
99    },
100
101    afterRender : function(){
102        Ext.form.TriggerField.superclass.afterRender.call(this);
103        var y;
104        if(Ext.isIE && !this.hideTrigger && this.el.getY() != (y = this.trigger.getY())){
105            this.el.position();
106            this.el.setY(y);
107        }
108    },
109
110    // private
111    initTrigger : function(){
112        this.trigger.on("click", this.onTriggerClick, this, {preventDefault:true});
113        this.trigger.addClassOnOver('x-form-trigger-over');
114        this.trigger.addClassOnClick('x-form-trigger-click');
115    },
116
117    // private
118    onDestroy : function(){
119        if(this.trigger){
120            this.trigger.removeAllListeners();
121            this.trigger.remove();
122        }
123        if(this.wrap){
124            this.wrap.remove();
125        }
126        Ext.form.TriggerField.superclass.onDestroy.call(this);
127    },
128
129    // private
130    onFocus : function(){
131        Ext.form.TriggerField.superclass.onFocus.call(this);
132        if(!this.mimicing){
133            this.wrap.addClass('x-trigger-wrap-focus');
134            this.mimicing = true;
135            Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
136            if(this.monitorTab){
137                this.el.on("keydown", this.checkTab, this);
138            }
139        }
140    },
141
142    // private
143    checkTab : function(e){
144        if(e.getKey() == e.TAB){
145            this.triggerBlur();
146        }
147    },
148
149    // private
150    onBlur : function(){
151        // do nothing
152    },
153
154    // private
155    mimicBlur : function(e){
156        if(!this.wrap.contains(e.target) && this.validateBlur(e)){
157            this.triggerBlur();
158        }
159    },
160
161    // private
162    triggerBlur : function(){
163        this.mimicing = false;
164        Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
165        if(this.monitorTab && this.el){
166            this.el.un("keydown", this.checkTab, this);
167        }
168        this.beforeBlur();
169        if(this.wrap){
170            this.wrap.removeClass('x-trigger-wrap-focus');
171        }
172        Ext.form.TriggerField.superclass.onBlur.call(this);
173    },
174
175    beforeBlur : Ext.emptyFn, 
176
177    // private
178    // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
179    validateBlur : function(e){
180        return true;
181    },
182
183    // private
184    onDisable : function(){
185        Ext.form.TriggerField.superclass.onDisable.call(this);
186        if(this.wrap){
187            this.wrap.addClass(this.disabledClass);
188            this.el.removeClass(this.disabledClass);
189        }
190    },
191
192    // private
193    onEnable : function(){
194        Ext.form.TriggerField.superclass.onEnable.call(this);
195        if(this.wrap){
196            this.wrap.removeClass(this.disabledClass);
197        }
198    },
199
200    // private
201    onShow : function(){
202        if(this.wrap){
203            this.wrap.dom.style.display = '';
204            this.wrap.dom.style.visibility = 'visible';
205        }
206    },
207
208    // private
209    onHide : function(){
210        this.wrap.dom.style.display = 'none';
211    },
212
213    /**
214     * The function that should handle the trigger's click event.  This method does nothing by default until overridden
215     * by an implementing function.
216     * @method
217     * @param {EventObject} e
218     */
219    onTriggerClick : Ext.emptyFn
220
221    /**
222     * @cfg {Boolean} grow @hide
223     */
224    /**
225     * @cfg {Number} growMin @hide
226     */
227    /**
228     * @cfg {Number} growMax @hide
229     */
230});
231
232// TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
233// to be extended by an implementing class.  For an example of implementing this class, see the custom
234// SearchField implementation here: http://extjs.com/deploy/ext/examples/form/custom.html
235Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
236    initComponent : function(){
237        Ext.form.TwinTriggerField.superclass.initComponent.call(this);
238
239        this.triggerConfig = {
240            tag:'span', cls:'x-form-twin-triggers', cn:[
241            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
242            {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
243        ]};
244    },
245
246    getTrigger : function(index){
247        return this.triggers[index];
248    },
249
250    initTrigger : function(){
251        var ts = this.trigger.select('.x-form-trigger', true);
252        this.wrap.setStyle('overflow', 'hidden');
253        var triggerField = this;
254        ts.each(function(t, all, index){
255            t.hide = function(){
256                var w = triggerField.wrap.getWidth();
257                this.dom.style.display = 'none';
258                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
259            };
260            t.show = function(){
261                var w = triggerField.wrap.getWidth();
262                this.dom.style.display = '';
263                triggerField.el.setWidth(w-triggerField.trigger.getWidth());
264            };
265            var triggerIndex = 'Trigger'+(index+1);
266
267            if(this['hide'+triggerIndex]){
268                t.dom.style.display = 'none';
269            }
270            t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
271            t.addClassOnOver('x-form-trigger-over');
272            t.addClassOnClick('x-form-trigger-click');
273        }, this);
274        this.triggers = ts.elements;
275    },
276
277    onTrigger1Click : Ext.emptyFn,
278    onTrigger2Click : Ext.emptyFn
279});
280Ext.reg('trigger', Ext.form.TriggerField);
Note: See TracBrowser for help on using the repository browser.