/** * @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: *

var trigger = new Ext.form.TriggerField();
trigger.onTriggerClick = myTriggerFn;
trigger.applyToMarkup('my-field');
* * 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, {
/** * @cfg {String} triggerClass * An additional CSS class used to style the trigger button. The trigger will always get the * class 'x-form-trigger' by default and triggerClass will be appended if specified. */
/** * @cfg {Mixed} triggerConfig *

A {@link Ext.DomHelper DomHelper} config object specifying the structure of the * trigger element for this Field. (Optional).

*

Specify this when you need a customized element to act as the trigger button for a TriggerField.

*

Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning * and appearance of the trigger. Defaults to:

*
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
*/
/** * @cfg {String/Object} autoCreate

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 {@link Ext.Component#autoEl autoEl} for details. Defaults to:

*
{tag: "input", type: "text", size: "16", autocomplete: "off"}
*/ defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
/** * @cfg {Boolean} hideTrigger true to hide the trigger element and display only the base * text field (defaults to false) */ hideTrigger:false,
/** * @cfg {Boolean} editable false 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 true). */ editable: true,
/** * @cfg {Boolean} readOnly true 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 false) */ readOnly: false,
/** * @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to * x-trigger-wrap-focus. */ wrapFocusClass: 'x-trigger-wrap-focus',
/** * @hide * @method autoSize */ autoSize: Ext.emptyFn, // private monitorTab : true, // private deferHeight : true, // private mimicing : false, actionMode: 'wrap', removeMode: 'container', 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 && 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, 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; this.updateEditState(); }, 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()); } }, setHideTrigger: function(hideTrigger){ if(hideTrigger != this.hideTrigger){ this.hideTrigger = hideTrigger; this.updateEditState(); } },
/** * @param {Boolean} value True to allow the user to directly edit the field text * 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 'editable' config option at config time. */ setEditable: function(editable){ if(editable != this.editable){ this.editable = editable; this.updateEditState(); } },
/** * @param {Boolean} value True to prevent the user changing the field and explicitly * hide the trigger. * Setting this to true will superceed settings editable and hideTrigger. * Setting this to false will defer back to editable and hideTrigger. This method * is the runtime equivalent of setting the 'readOnly' config option at config time. */ setReadOnly: function(readOnly){ if(readOnly != this.readOnly){ this.readOnly = readOnly; this.updateEditState(); } }, afterRender : function(){ Ext.form.TriggerField.superclass.afterRender.call(this); }, // 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; },
/** * 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
/** * @cfg {Boolean} grow @hide */
/** * @cfg {Number} growMin @hide */
/** * @cfg {Number} growMax @hide */ });
/** * @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: * http://extjs.com/deploy/ext/examples/form/custom.html */ Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
/** * @cfg {Mixed} triggerConfig *

A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements * for this Field. (Optional).

*

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 x-form-trigger (also see * {@link #trigger1Class} and {@link #trigger2Class}).

*

Note that when using this option, it is the developer's responsibility to ensure correct sizing, * positioning and appearance of the triggers.

*/
/** * @cfg {String} trigger1Class * An additional CSS class used to style the trigger button. The trigger will always get the * class 'x-form-trigger' by default and triggerClass will be appended if specified. */
/** * @cfg {String} trigger2Class * An additional CSS class used to style the trigger button. The trigger will always get the * class 'x-form-trigger' by default and triggerClass will be appended 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, cls: "x-form-trigger " + this.trigger1Class}, {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class} ]}; }, getTrigger : function(index){ return this.triggers[index]; }, initTrigger : function(){ var ts = this.trigger.select('.x-form-trigger', true); var 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()); this['hidden' + triggerIndex] = true; }; t.show = function(){ var w = triggerField.wrap.getWidth(); this.dom.style.display = ''; triggerField.el.setWidth(w-triggerField.trigger.getWidth()); this['hidden' + triggerIndex] = false; }; if(this['hide'+triggerIndex]){ t.dom.style.display = 'none'; this['hidden' + triggerIndex] = true; } 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); },
/** * 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,
/** * 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);