src/widgets/form/TextArea.js

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