git.roojs.org Git - roojs1/blob - Roo/form/TextArea.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.form.TextArea
  14  * @extends Roo.form.TextField
  15  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
  16  * support for auto-sizing.
  17  * @constructor
  18  * Creates a new TextArea
  19  * @param {Object} config Configuration options
  20  */
  21 Roo.form.TextArea = function(config){
  22     Roo.form.TextArea.superclass.constructor.call(this, config);
  23     // these are provided exchanges for backwards compat
  24     // minHeight/maxHeight were replaced by growMin/growMax to be
  25     // compatible with TextField growing config values
  26     if(this.minHeight !== undefined){
  27         this.growMin = this.minHeight;
  28     }
  29     if(this.maxHeight !== undefined){
  30         this.growMax = this.maxHeight;
  31     }
  32 };
  33
  34 Roo.extend(Roo.form.TextArea, Roo.form.TextField,  {
  35     /**
  36      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
  37      */
  38     growMin : 60,
  39     /**
  40      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
  41      */
  42     growMax: 1000,
  43     /**
  44      * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
  45      * in the field (equivalent to setting overflow: hidden, defaults to false)
  46      */
  47     preventScrollbars: false,
  48     /**
  49      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  50      * {tag: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
  51      */
  52
  53     // private
  54     onRender : function(ct, position){
  55         if(!this.el){
  56             this.defaultAutoCreate = {
  57                 tag: "textarea",
  58                 style:"width:300px;height:60px;",
  59                 autocomplete: "off"
  60             };
  61         }
  62         Roo.form.TextArea.superclass.onRender.call(this, ct, position);
  63         if(this.grow){
  64             this.textSizeEl = Roo.DomHelper.append(document.body, {
  65                 tag: "pre", cls: "x-form-grow-sizer"
  66             });
  67             if(this.preventScrollbars){
  68                 this.el.setStyle("overflow", "hidden");
  69             }
  70             this.el.setHeight(this.growMin);
  71         }
  72     },
  73
  74     onDestroy : function(){
  75         if(this.textSizeEl){
  76             this.textSizeEl.parentNode.removeChild(this.textSizeEl);
  77         }
  78         Roo.form.TextArea.superclass.onDestroy.call(this);
  79     },
  80
  81     // private
  82     onKeyUp : function(e){
  83         if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
  84             this.autoSize();
  85         }
  86     },
  87
  88     /**
  89      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
  90      * This only takes effect if grow = true, and fires the autosize event if the height changes.
  91      */
  92     autoSize : function(){
  93         if(!this.grow || !this.textSizeEl){
  94             return;
  95         }
  96         var el = this.el;
  97         var v = el.dom.value;
  98         var ts = this.textSizeEl;
  99
 100         ts.innerHTML = '';
 101         ts.appendChild(document.createTextNode(v));
 102         v = ts.innerHTML;
 103
 104         Roo.fly(ts).setWidth(this.el.getWidth());
 105         if(v.length < 1){
 106             v = "&#160;&#160;";
 107         }else{
 108             if(Roo.isIE){
 109                 v = v.replace(/\n/g, '<p>&#160;</p>');
 110             }
 111             v += "&#160;\n&#160;";
 112         }
 113         ts.innerHTML = v;
 114         var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
 115         if(h != this.lastHeight){
 116             this.lastHeight = h;
 117             this.el.setHeight(h);
 118             this.fireEvent("autosize", this, h);
 119         }
 120     }
 121 });