X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/widgets/form/TriggerField.js?ds=sidebyside diff --git a/src/widgets/form/TriggerField.js b/src/widgets/form/TriggerField.js deleted file mode 100644 index 2a948e43..00000000 --- a/src/widgets/form/TriggerField.js +++ /dev/null @@ -1,391 +0,0 @@ -/*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @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);