Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / TextArea.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.form.TextArea"></div>/**
16  * @class Ext.form.TextArea
17  * @extends Ext.form.TextField
18  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
19  * support for auto-sizing.
20  * @constructor
21  * Creates a new TextArea
22  * @param {Object} config Configuration options
23  * @xtype textarea
24  */
25 Ext.form.TextArea = Ext.extend(Ext.form.TextField,  {
26     <div id="cfg-Ext.form.TextArea-growMin"></div>/**
27      * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
28      * (defaults to <tt>60</tt>)
29      */
30     growMin : 60,
31     <div id="cfg-Ext.form.TextArea-growMax"></div>/**
32      * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
33      * (defaults to <tt>1000</tt>)
34      */
35     growMax: 1000,
36     growAppend : '&#160;\n&#160;',
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.removeNode(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     doAutoSize : function(e){
87         return !e.isNavKeyPress() || e.getKey() == e.ENTER;
88     },
89     
90     // inherit docs
91     filterValidation: function(e) {            
92         if(!e.isNavKeyPress() || (!this.enterIsSpecial && e.keyCode == e.ENTER)){
93             this.validationTask.delay(this.validationDelay);
94         }
95     },
96
97     <div id="method-Ext.form.TextArea-autoSize"></div>/**
98      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
99      * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.
100      */
101     autoSize: function(){
102         if(!this.grow || !this.textSizeEl){
103             return;
104         }
105         var el = this.el,
106             v = Ext.util.Format.htmlEncode(el.dom.value),
107             ts = this.textSizeEl,
108             h;
109             
110         Ext.fly(ts).setWidth(this.el.getWidth());
111         if(v.length < 1){
112             v = "&#160;&#160;";
113         }else{
114             v += this.growAppend;
115             if(Ext.isIE){
116                 v = v.replace(/\n/g, '&#160;<br />');
117             }
118         }
119         ts.innerHTML = v;
120         h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
121         if(h != this.lastHeight){
122             this.lastHeight = h;
123             this.el.setHeight(h);
124             this.fireEvent("autosize", this, h);
125         }
126     }
127 });
128 Ext.reg('textarea', Ext.form.TextArea);</pre>    
129 </body>
130 </html>