docs/source/TextArea.html

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