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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
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.
18 * Creates a new TextArea
19 * @param {Object} config Configuration options
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">;
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">;
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)
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)
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)
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: "textarea", style: "width:300px;height:60px;", autocomplete: "off"})
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">"textarea"</span><span class="jsdoc-syntax">,
58 </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"width:300px;height:60px;"</span><span class="jsdoc-syntax">,
59 </span><span class="jsdoc-var">autocomplete</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"new-password"
60 </span><span class="jsdoc-syntax">};
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">"pre"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"x-form-grow-sizer"
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">"overflow"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">);
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">);
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">);
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">);
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">();
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.
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">;
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">;
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">;
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">< 1){
106 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"&#160;&#160;"</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">'<p>&#160;</p>'</span><span class="jsdoc-syntax">);
111 </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">"&#160;\n&#160;"</span><span class="jsdoc-syntax">;
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">"autosize"</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">);
121 });</span></code></body></html>