Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / src / widgets / form / TextArea.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 /**
8  * @class Ext.form.TextArea
9  * @extends Ext.form.TextField
10  * Multiline text field.  Can be used as a direct replacement for traditional textarea fields, plus adds
11  * support for auto-sizing.
12  * @constructor
13  * Creates a new TextArea
14  * @param {Object} config Configuration options
15  * @xtype textarea
16  */
17 Ext.form.TextArea = Ext.extend(Ext.form.TextField,  {
18     /**
19      * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
20      * (defaults to <tt>60</tt>)
21      */
22     growMin : 60,
23     /**
24      * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
25      * (defaults to <tt>1000</tt>)
26      */
27     growMax: 1000,
28     growAppend : '&#160;\n&#160;',
29
30     enterIsSpecial : false,
31
32     /**
33      * @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is
34      * in the field. This option is only relevant when {@link #grow} is <tt>true</tt>. Equivalent to setting overflow: hidden, defaults to 
35      * <tt>false</tt>.
36      */
37     preventScrollbars: false,
38     /**
39      * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
40      * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
41      * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details.  Defaults to:</p>
42      * <pre><code>{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}</code></pre>
43      */
44
45     // private
46     onRender : function(ct, position){
47         if(!this.el){
48             this.defaultAutoCreate = {
49                 tag: "textarea",
50                 style:"width:100px;height:60px;",
51                 autocomplete: "off"
52             };
53         }
54         Ext.form.TextArea.superclass.onRender.call(this, ct, position);
55         if(this.grow){
56             this.textSizeEl = Ext.DomHelper.append(document.body, {
57                 tag: "pre", cls: "x-form-grow-sizer"
58             });
59             if(this.preventScrollbars){
60                 this.el.setStyle("overflow", "hidden");
61             }
62             this.el.setHeight(this.growMin);
63         }
64     },
65
66     onDestroy : function(){
67         Ext.removeNode(this.textSizeEl);
68         Ext.form.TextArea.superclass.onDestroy.call(this);
69     },
70
71     fireKey : function(e){
72         if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
73             this.fireEvent("specialkey", this, e);
74         }
75     },
76     
77     // private
78     doAutoSize : function(e){
79         return !e.isNavKeyPress() || e.getKey() == e.ENTER;
80     },
81     
82     // inherit docs
83     filterValidation: function(e) {            
84         if(!e.isNavKeyPress() || (!this.enterIsSpecial && e.keyCode == e.ENTER)){
85             this.validationTask.delay(this.validationDelay);
86         }
87     },
88
89     /**
90      * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
91      * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.
92      */
93     autoSize: function(){
94         if(!this.grow || !this.textSizeEl){
95             return;
96         }
97         var el = this.el,
98             v = Ext.util.Format.htmlEncode(el.dom.value),
99             ts = this.textSizeEl,
100             h;
101             
102         Ext.fly(ts).setWidth(this.el.getWidth());
103         if(v.length < 1){
104             v = "&#160;&#160;";
105         }else{
106             v += this.growAppend;
107             if(Ext.isIE){
108                 v = v.replace(/\n/g, '&#160;<br />');
109             }
110         }
111         ts.innerHTML = v;
112         h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
113         if(h != this.lastHeight){
114             this.lastHeight = h;
115             this.el.setHeight(h);
116             this.fireEvent("autosize", this, h);
117         }
118     }
119 });
120 Ext.reg('textarea', Ext.form.TextArea);