1 | /*! |
---|
2 | * Ext JS Library 3.0.0 |
---|
3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
4 | * licensing@extjs.com |
---|
5 | * http://www.extjs.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 : ' \n ', |
---|
29 | growPad : Ext.isWebKit ? -6 : 0, |
---|
30 | |
---|
31 | enterIsSpecial : false, |
---|
32 | |
---|
33 | /** |
---|
34 | * @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is |
---|
35 | * in the field (equivalent to setting overflow: hidden, defaults to <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.destroy(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 | onKeyUp : function(e){ |
---|
79 | if(!e.isNavKeyPress() || e.getKey() == e.ENTER){ |
---|
80 | this.autoSize(); |
---|
81 | } |
---|
82 | Ext.form.TextArea.superclass.onKeyUp.call(this, e); |
---|
83 | }, |
---|
84 | |
---|
85 | /** |
---|
86 | * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. |
---|
87 | * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes. |
---|
88 | */ |
---|
89 | autoSize: function(){ |
---|
90 | if(!this.grow || !this.textSizeEl){ |
---|
91 | return; |
---|
92 | } |
---|
93 | var el = this.el; |
---|
94 | var v = el.dom.value; |
---|
95 | var ts = this.textSizeEl; |
---|
96 | ts.innerHTML = ''; |
---|
97 | ts.appendChild(document.createTextNode(v)); |
---|
98 | v = ts.innerHTML; |
---|
99 | Ext.fly(ts).setWidth(this.el.getWidth()); |
---|
100 | if(v.length < 1){ |
---|
101 | v = "  "; |
---|
102 | }else{ |
---|
103 | v += this.growAppend; |
---|
104 | if(Ext.isIE){ |
---|
105 | v = v.replace(/\n/g, '<br />'); |
---|
106 | } |
---|
107 | } |
---|
108 | ts.innerHTML = v; |
---|
109 | var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin) + this.growPad); |
---|
110 | if(h != this.lastHeight){ |
---|
111 | this.lastHeight = h; |
---|
112 | this.el.setHeight(h); |
---|
113 | this.fireEvent("autosize", this, h); |
---|
114 | } |
---|
115 | } |
---|
116 | }); |
---|
117 | Ext.reg('textarea', Ext.form.TextArea); |
---|