source/widgets/form/TextArea.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.TextArea\r
  11  * @extends Ext.form.TextField\r
  12  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds\r
  13  * support for auto-sizing.\r
  14  * @constructor\r
  15  * Creates a new TextArea\r
  16  * @param {Object} config Configuration options\r
  17  */\r
  18 Ext.form.TextArea = Ext.extend(Ext.form.TextField,  {\r
  19     /**\r
  20      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)\r
  21      */\r
  22     growMin : 60,\r
  23     /**\r
  24      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)\r
  25      */\r
  26     growMax: 1000,\r
  27     growAppend : '&#160;\n&#160;',\r
  28     growPad : 0,\r
  29 \r
  30     enterIsSpecial : false,\r
  31 \r
  32     /**\r
  33      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is\r
  34      * in the field (equivalent to setting overflow: hidden, defaults to false)\r
  35      */\r
  36     preventScrollbars: false,\r
  37     /**\r
  38      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to\r
  39      * {tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"})\r
  40      */\r
  41 \r
  42     // private\r
  43     onRender : function(ct, position){\r
  44         if(!this.el){\r
  45             this.defaultAutoCreate = {\r
  46                 tag: "textarea",\r
  47                 style:"width:100px;height:60px;",\r
  48                 autocomplete: "off"\r
  49             };\r
  50         }\r
  51         Ext.form.TextArea.superclass.onRender.call(this, ct, position);\r
  52         if(this.grow){\r
  53             this.textSizeEl = Ext.DomHelper.append(document.body, {\r
  54                 tag: "pre", cls: "x-form-grow-sizer"\r
  55             });\r
  56             if(this.preventScrollbars){\r
  57                 this.el.setStyle("overflow", "hidden");\r
  58             }\r
  59             this.el.setHeight(this.growMin);\r
  60         }\r
  61     },\r
  62 \r
  63     onDestroy : function(){\r
  64         if(this.textSizeEl){\r
  65             Ext.removeNode(this.textSizeEl);\r
  66         }\r
  67         Ext.form.TextArea.superclass.onDestroy.call(this);\r
  68     },\r
  69 \r
  70     fireKey : function(e){\r
  71         if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){\r
  72             this.fireEvent("specialkey", this, e);\r
  73         }\r
  74     },\r
  75 \r
  76     // private\r
  77     onKeyUp : function(e){\r
  78         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){\r
  79             this.autoSize();\r
  80         }\r
  81         Ext.form.TextArea.superclass.onKeyUp.call(this, e);\r
  82     },\r
  83 \r
  84     /**\r
  85      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.\r
  86      * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.\r
  87      */\r
  88     autoSize : function(){\r
  89         if(!this.grow || !this.textSizeEl){\r
  90             return;\r
  91         }\r
  92         var el = this.el;\r
  93         var v = el.dom.value;\r
  94         var ts = this.textSizeEl;\r
  95         ts.innerHTML = '';\r
  96         ts.appendChild(document.createTextNode(v));\r
  97         v = ts.innerHTML;\r
  98 \r
  99         Ext.fly(ts).setWidth(this.el.getWidth());\r
 100         if(v.length < 1){\r
 101             v = "&#160;&#160;";\r
 102         }else{\r
 103             if(Ext.isIE){\r
 104                 v = v.replace(/\n/g, '<p>&#160;</p>');\r
 105             }\r
 106             v += this.growAppend;\r
 107         }\r
 108         ts.innerHTML = v;\r
 109         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin)+this.growPad);\r
 110         if(h != this.lastHeight){\r
 111             this.lastHeight = h;\r
 112             this.el.setHeight(h);\r
 113             this.fireEvent("autosize", this, h);\r
 114         }\r
 115     }\r
 116 });\r
 117 Ext.reg('textarea', Ext.form.TextArea);