X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/src/widgets/form/TriggerField.js diff --git a/src/widgets/form/TriggerField.js b/src/widgets/form/TriggerField.js index 2a948e43..865adf09 100644 --- a/src/widgets/form/TriggerField.js +++ b/src/widgets/form/TriggerField.js @@ -1,8 +1,8 @@ /*! - * Ext JS Library 3.1.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ /** * @class Ext.form.TriggerField @@ -83,8 +83,6 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { actionMode: 'wrap', - removeMode: 'container', - defaultTriggerWidth: 17, // private @@ -99,7 +97,7 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { getTriggerWidth: function(){ var tw = this.trigger.getWidth(); - if(!this.hideTrigger && tw === 0){ + if(!this.hideTrigger && !this.readOnly && tw === 0){ tw = this.defaultTriggerWidth; } return tw; @@ -119,13 +117,16 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { 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}); + {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; - this.updateEditState(); + }, + + getWidth: function() { + return(this.el.getWidth() + this.trigger.getWidth()); }, updateEditState: function(){ @@ -151,6 +152,10 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { } }, + /** + * 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; @@ -159,11 +164,11 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { }, /** - * @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. + * 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){ @@ -173,11 +178,11 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { }, /** + * 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. - * 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){ @@ -188,6 +193,7 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, { afterRender : function(){ Ext.form.TriggerField.superclass.afterRender.call(this); + this.updateEditState(); }, // private @@ -313,37 +319,47 @@ Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, { 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} + {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); - var triggerField = this; + 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()); - this['hidden' + triggerIndex] = true; + triggerField['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; + triggerField['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');