docs/source/TriggerField.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js"><div id="cls-Ext.form.TriggerField"></div>/**
   9  * @class Ext.form.TriggerField
  10  * @extends Ext.form.TextField
  11  * Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
  12  * The trigger has no default action, so you must assign a function to implement the trigger click handler by
  13  * overriding {@link #onTriggerClick}. You can create a TriggerField directly, as it renders exactly like a combobox
  14  * for which you can provide a custom implementation.  For example:
  15  * <pre><code>
  16 var trigger = new Ext.form.TriggerField();
  17 trigger.onTriggerClick = myTriggerFn;
  18 trigger.applyToMarkup('my-field');
  19 </code></pre>
  20  *
  21  * However, in general you will most likely want to use TriggerField as the base class for a reusable component.
  22  * {@link Ext.form.DateField} and {@link Ext.form.ComboBox} are perfect examples of this.
  23  *
  24  * @constructor
  25  * Create a new TriggerField.
  26  * @param {Object} config Configuration options (valid {@Ext.form.TextField} config options will also be applied
  27  * to the base TextField)
  28  * @xtype trigger
  29  */
  30 Ext.form.TriggerField = Ext.extend(Ext.form.TextField,  {
  31     <div id="cfg-Ext.form.TriggerField-triggerClass"></div>/**
  32      * @cfg {String} triggerClass
  33      * An additional CSS class used to style the trigger button.  The trigger will always get the
  34      * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
  35      */
  36     <div id="cfg-Ext.form.TriggerField-triggerConfig"></div>/**
  37      * @cfg {Mixed} triggerConfig
  38      * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the
  39      * trigger element for this Field. (Optional).</p>
  40      * <p>Specify this when you need a customized element to act as the trigger button for a TriggerField.</p>
  41      * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing, positioning
  42      * and appearance of the trigger.  Defaults to:</p>
  43      * <pre><code>{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}</code></pre>
  44      */
  45     <div id="cfg-Ext.form.TriggerField-autoCreate"></div>/**
  46      * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
  47      * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
  48      * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details.  Defaults to:</p>
  49      * <pre><code>{tag: "input", type: "text", size: "16", autocomplete: "off"}</code></pre>
  50      */
  51     defaultAutoCreate : {tag: "input", type: "text", size: "16", autocomplete: "off"},
  52     <div id="cfg-Ext.form.TriggerField-hideTrigger"></div>/**
  53      * @cfg {Boolean} hideTrigger <tt>true</tt> to hide the trigger element and display only the base
  54      * text field (defaults to <tt>false</tt>)
  55      */
  56     hideTrigger:false,
  57     <div id="cfg-Ext.form.TriggerField-editable"></div>/**
  58      * @cfg {Boolean} editable <tt>false</tt> to prevent the user from typing text directly into the field,
  59      * the field will only respond to a click on the trigger to set the value. (defaults to <tt>true</tt>)
  60      */
  61     editable: true,
  62     <div id="cfg-Ext.form.TriggerField-wrapFocusClass"></div>/**
  63      * @cfg {String} wrapFocusClass The class added to the to the wrap of the trigger element. Defaults to
  64      * <tt>x-trigger-wrap-focus</tt>.
  65      */
  66     wrapFocusClass: 'x-trigger-wrap-focus',
  67     <div id="method-Ext.form.TriggerField-autoSize"></div>/**
  68      * @hide
  69      * @method autoSize
  70      */
  71     autoSize: Ext.emptyFn,
  72     // private
  73     monitorTab : true,
  74     // private
  75     deferHeight : true,
  76     // private
  77     mimicing : false,
  78
  79     actionMode: 'wrap',
  80
  81     // private
  82     onResize : function(w, h){
  83         Ext.form.TriggerField.superclass.onResize.call(this, w, h);
  84         if(typeof w == 'number'){
  85             this.el.setWidth(this.adjustWidth('input', w - this.trigger.getWidth()));
  86         }
  87         this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
  88     },
  89
  90     // private
  91     adjustSize : Ext.BoxComponent.prototype.adjustSize,
  92
  93     // private
  94     getResizeEl : function(){
  95         return this.wrap;
  96     },
  97
  98     // private
  99     getPositionEl : function(){
 100         return this.wrap;
 101     },
 102
 103     // private
 104     alignErrorIcon : function(){
 105         if(this.wrap){
 106             this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
 107         }
 108     },
 109
 110     // private
 111     onRender : function(ct, position){
 112         Ext.form.TriggerField.superclass.onRender.call(this, ct, position);
 113
 114         this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
 115         this.trigger = this.wrap.createChild(this.triggerConfig ||
 116                 {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
 117         if(this.hideTrigger){
 118             this.trigger.setDisplayed(false);
 119         }
 120         this.initTrigger();
 121         if(!this.width){
 122             this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
 123         }
 124         if(!this.editable){
 125             this.editable = true;
 126             this.setEditable(false);
 127         }
 128     },
 129
 130     afterRender : function(){
 131         Ext.form.TriggerField.superclass.afterRender.call(this);
 132     },
 133
 134     // private
 135     initTrigger : function(){
 136         this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
 137         this.trigger.addClassOnOver('x-form-trigger-over');
 138         this.trigger.addClassOnClick('x-form-trigger-click');
 139     },
 140
 141     // private
 142     onDestroy : function(){
 143                 Ext.destroy(this.trigger, this.wrap);
 144         if (this.mimicing){
 145             Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
 146         }
 147         Ext.form.TriggerField.superclass.onDestroy.call(this);
 148     },
 149
 150     // private
 151     onFocus : function(){
 152         Ext.form.TriggerField.superclass.onFocus.call(this);
 153         if(!this.mimicing){
 154             this.wrap.addClass(this.wrapFocusClass);
 155             this.mimicing = true;
 156             Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {delay: 10});
 157             if(this.monitorTab){
 158                 this.el.on('keydown', this.checkTab, this);
 159             }
 160         }
 161     },
 162
 163     // private
 164     checkTab : function(e){
 165         if(e.getKey() == e.TAB){
 166             this.triggerBlur();
 167         }
 168     },
 169
 170     // private
 171     onBlur : function(){
 172         // do nothing
 173     },
 174
 175     // private
 176     mimicBlur : function(e){
 177         if(!this.wrap.contains(e.target) && this.validateBlur(e)){
 178             this.triggerBlur();
 179         }
 180     },
 181
 182     // private
 183     triggerBlur : function(){
 184         this.mimicing = false;
 185         Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
 186         if(this.monitorTab && this.el){
 187             this.el.un("keydown", this.checkTab, this);
 188         }
 189         Ext.form.TriggerField.superclass.onBlur.call(this);
 190         if(this.wrap){
 191             this.wrap.removeClass(this.wrapFocusClass);
 192         }
 193     },
 194
 195     beforeBlur : Ext.emptyFn,
 196
 197     <div id="method-Ext.form.TriggerField-setEditable"></div>/**
 198      * Allow or prevent the user from directly editing the field text.  If false is passed,
 199      * the user will only be able to modify the field using the trigger.  This method
 200      * is the runtime equivalent of setting the 'editable' config option at config time.
 201      * @param {Boolean} value True to allow the user to directly edit the field text
 202      */
 203     setEditable : function(value){
 204         if(value == this.editable){
 205             return;
 206         }
 207         this.editable = value;
 208         if(!value){
 209             this.el.addClass('x-trigger-noedit').on('click', this.onTriggerClick, this).dom.setAttribute('readOnly', true);
 210         }else{
 211             this.el.removeClass('x-trigger-noedit').un('click', this.onTriggerClick,  this).dom.removeAttribute('readOnly');
 212         }
 213     },
 214
 215     // private
 216     // This should be overriden by any subclass that needs to check whether or not the field can be blurred.
 217     validateBlur : function(e){
 218         return true;
 219     },
 220
 221     <div id="method-Ext.form.TriggerField-onTriggerClick"></div>/**
 222      * The function that should handle the trigger's click event.  This method does nothing by default
 223      * until overridden by an implementing function.  See Ext.form.ComboBox and Ext.form.DateField for
 224      * sample implementations.
 225      * @method
 226      * @param {EventObject} e
 227      */
 228     onTriggerClick : Ext.emptyFn
 229
 230     <div id="cfg-Ext.form.TriggerField-grow"></div>/**
 231      * @cfg {Boolean} grow @hide
 232      */
 233     <div id="cfg-Ext.form.TriggerField-growMin"></div>/**
 234      * @cfg {Number} growMin @hide
 235      */
 236     <div id="cfg-Ext.form.TriggerField-growMax"></div>/**
 237      * @cfg {Number} growMax @hide
 238      */
 239 });
 240
 241 <div id="cls-Ext.form.TwinTriggerField"></div>/**
 242  * @class Ext.form.TwinTriggerField
 243  * @extends Ext.form.TriggerField
 244  * TwinTriggerField is not a public class to be used directly.  It is meant as an abstract base class
 245  * to be extended by an implementing class.  For an example of implementing this class, see the custom
 246  * SearchField implementation here:
 247  * <a href="http://extjs.com/deploy/ext/examples/form/custom.html">http://extjs.com/deploy/ext/examples/form/custom.html</a>
 248  */
 249 Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
 250     <div id="cfg-Ext.form.TwinTriggerField-triggerConfig"></div>/**
 251      * @cfg {Mixed} triggerConfig
 252      * <p>A {@link Ext.DomHelper DomHelper} config object specifying the structure of the trigger elements
 253      * for this Field. (Optional).</p>
 254      * <p>Specify this when you need a customized element to contain the two trigger elements for this Field.
 255      * Each trigger element must be marked by the CSS class <tt>x-form-trigger</tt> (also see
 256      * <tt>{@link #trigger1Class}</tt> and <tt>{@link #trigger2Class}</tt>).</p>
 257      * <p>Note that when using this option, it is the developer's responsibility to ensure correct sizing,
 258      * positioning and appearance of the triggers.</p>
 259      */
 260     <div id="cfg-Ext.form.TwinTriggerField-trigger1Class"></div>/**
 261      * @cfg {String} trigger1Class
 262      * An additional CSS class used to style the trigger button.  The trigger will always get the
 263      * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
 264      */
 265     <div id="cfg-Ext.form.TwinTriggerField-trigger2Class"></div>/**
 266      * @cfg {String} trigger2Class
 267      * An additional CSS class used to style the trigger button.  The trigger will always get the
 268      * class <tt>'x-form-trigger'</tt> by default and <tt>triggerClass</tt> will be <b>appended</b> if specified.
 269      */
 270
 271     initComponent : function(){
 272         Ext.form.TwinTriggerField.superclass.initComponent.call(this);
 273
 274         this.triggerConfig = {
 275             tag:'span', cls:'x-form-twin-triggers', cn:[
 276             {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
 277             {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
 278         ]};
 279     },
 280
 281     getTrigger : function(index){
 282         return this.triggers[index];
 283     },
 284
 285     initTrigger : function(){
 286         var ts = this.trigger.select('.x-form-trigger', true);
 287         this.wrap.setStyle('overflow', 'hidden');
 288         var triggerField = this;
 289         ts.each(function(t, all, index){
 290             t.hide = function(){
 291                 var w = triggerField.wrap.getWidth();
 292                 this.dom.style.display = 'none';
 293                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
 294             };
 295             t.show = function(){
 296                 var w = triggerField.wrap.getWidth();
 297                 this.dom.style.display = '';
 298                 triggerField.el.setWidth(w-triggerField.trigger.getWidth());
 299             };
 300             var triggerIndex = 'Trigger'+(index+1);
 301
 302             if(this['hide'+triggerIndex]){
 303                 t.dom.style.display = 'none';
 304             }
 305             this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
 306             t.addClassOnOver('x-form-trigger-over');
 307             t.addClassOnClick('x-form-trigger-click');
 308         }, this);
 309         this.triggers = ts.elements;
 310     },
 311
 312     <div id="method-Ext.form.TwinTriggerField-onTrigger1Click"></div>/**
 313      * The function that should handle the trigger's click event.  This method does nothing by default
 314      * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
 315      * for additional information.
 316      * @method
 317      * @param {EventObject} e
 318      */
 319     onTrigger1Click : Ext.emptyFn,
 320     <div id="method-Ext.form.TwinTriggerField-onTrigger2Click"></div>/**
 321      * The function that should handle the trigger's click event.  This method does nothing by default
 322      * until overridden by an implementing function. See {@link Ext.form.TriggerField#onTriggerClick}
 323      * for additional information.
 324      * @method
 325      * @param {EventObject} e
 326      */
 327     onTrigger2Click : Ext.emptyFn
 328 });
 329 Ext.reg('trigger', Ext.form.TriggerField);</pre>    \r
 330 </body>\r
 331 </html>