source/widgets/form/TriggerField.js

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