git.roojs.org Git - roojs1/blob - docs/src/Roo_form_TextArea.js.html

   1 <html><head><title>/home/edward/gitlive/roojs1/Roo/form/TextArea.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
   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  * &lt;script type=&quot;text/javascript&quot;&gt;
  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 </span><span class="jsdoc-var">Roo.form.TextArea </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
  22     </span><span class="jsdoc-var">Roo.form.TextArea.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
  23     </span><span class="jsdoc-comment">// 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     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.minHeight </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
  27         </span><span class="jsdoc-var">this.growMin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.minHeight</span><span class="jsdoc-syntax">;
  28     }
  29     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.maxHeight </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
  30         </span><span class="jsdoc-var">this.growMax </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.maxHeight</span><span class="jsdoc-syntax">;
  31     }
  32 };
  33
  34 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.TextArea</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.TextField</span><span class="jsdoc-syntax">,  {
  35     </span><span class="jsdoc-comment">/**
  36      * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
  37      */
  38     </span><span class="jsdoc-var">growMin </span><span class="jsdoc-syntax">: 60,
  39     </span><span class="jsdoc-comment">/**
  40      * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
  41      */
  42     </span><span class="jsdoc-var">growMax</span><span class="jsdoc-syntax">: 1000,
  43     </span><span class="jsdoc-comment">/**
  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     </span><span class="jsdoc-var">preventScrollbars</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  48     </span><span class="jsdoc-comment">/**
  49      * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
  50      * {tag: &quot;textarea&quot;, style: &quot;width:300px;height:60px;&quot;, autocomplete: &quot;off&quot;})
  51      */
  52
  53     // private
  54     </span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
  55         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">){
  56             </span><span class="jsdoc-var">this.defaultAutoCreate </span><span class="jsdoc-syntax">= {
  57                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;textarea&quot;</span><span class="jsdoc-syntax">,
  58                 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;width:300px;height:60px;&quot;</span><span class="jsdoc-syntax">,
  59                 </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;new-password&quot;
  60             </span><span class="jsdoc-syntax">};
  61         }
  62         </span><span class="jsdoc-var">Roo.form.TextArea.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
  63         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.grow</span><span class="jsdoc-syntax">){
  64             </span><span class="jsdoc-var">this.textSizeEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.body</span><span class="jsdoc-syntax">, {
  65                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;pre&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;x-form-grow-sizer&quot;
  66             </span><span class="jsdoc-syntax">});
  67             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.preventScrollbars</span><span class="jsdoc-syntax">){
  68                 </span><span class="jsdoc-var">this.el.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
  69             }
  70             </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.growMin</span><span class="jsdoc-syntax">);
  71         }
  72     },
  73
  74     </span><span class="jsdoc-var">onDestroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  75         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.textSizeEl</span><span class="jsdoc-syntax">){
  76             </span><span class="jsdoc-var">this.textSizeEl.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.textSizeEl</span><span class="jsdoc-syntax">);
  77         }
  78         </span><span class="jsdoc-var">Roo.form.TextArea.superclass.onDestroy.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
  79     },
  80
  81     </span><span class="jsdoc-comment">// private
  82     </span><span class="jsdoc-var">onKeyUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
  83         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">e.isNavKeyPress</span><span class="jsdoc-syntax">() || </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">e.ENTER</span><span class="jsdoc-syntax">){
  84             </span><span class="jsdoc-var">this.autoSize</span><span class="jsdoc-syntax">();
  85         }
  86     },
  87
  88     </span><span class="jsdoc-comment">/**
  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     </span><span class="jsdoc-var">autoSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  93         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.grow </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">this.textSizeEl</span><span class="jsdoc-syntax">){
  94             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
  95         }
  96         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
  97         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">el.dom.value</span><span class="jsdoc-syntax">;
  98         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ts </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.textSizeEl</span><span class="jsdoc-syntax">;
  99
 100         </span><span class="jsdoc-var">ts.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
 101         </span><span class="jsdoc-var">ts.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">));
 102         </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ts.innerHTML</span><span class="jsdoc-syntax">;
 103
 104         </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ts</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el.getWidth</span><span class="jsdoc-syntax">());
 105         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v.length </span><span class="jsdoc-syntax">&lt; 1){
 106             </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;&amp;#160;&amp;#160;&quot;</span><span class="jsdoc-syntax">;
 107         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
 108             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
 109                 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.replace</span><span class="jsdoc-syntax">(/\n/g, </span><span class="jsdoc-string">'&lt;p&gt;&amp;#160;&lt;/p&gt;'</span><span class="jsdoc-syntax">);
 110             }
 111             </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">&quot;&amp;#160;\n&amp;#160;&quot;</span><span class="jsdoc-syntax">;
 112         }
 113         </span><span class="jsdoc-var">ts.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">;
 114         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.min</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.growMax</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ts.offsetHeight</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.growMin</span><span class="jsdoc-syntax">));
 115         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.lastHeight</span><span class="jsdoc-syntax">){
 116             </span><span class="jsdoc-var">this.lastHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">;
 117             </span><span class="jsdoc-var">this.el.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 118             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;autosize&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
 119         }
 120     }
 121 });</span></code></body></html>