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 Roo.form.TextArea = function(config){
22 Roo.form.TextArea.superclass.constructor.call(this, config);
23 // 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 if(this.minHeight !== undefined){
27 this.growMin = this.minHeight;
29 if(this.maxHeight !== undefined){
30 this.growMax = this.maxHeight;
34 Roo.extend(Roo.form.TextArea, Roo.form.TextField, {
36 * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
40 * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
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 preventScrollbars: false,
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 onRender : function(ct, position){
56 this.defaultAutoCreate = {
58 style:"width:300px;height:60px;",
59 autocomplete: "new-password"
62 Roo.form.TextArea.superclass.onRender.call(this, ct, position);
64 this.textSizeEl = Roo.DomHelper.append(document.body, {
65 tag: "pre", cls: "x-form-grow-sizer"
67 if(this.preventScrollbars){
68 this.el.setStyle("overflow", "hidden");
70 this.el.setHeight(this.growMin);
74 onDestroy : function(){
76 this.textSizeEl.parentNode.removeChild(this.textSizeEl);
78 Roo.form.TextArea.superclass.onDestroy.call(this);
82 onKeyUp : function(e){
83 if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
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 autoSize : function(){
93 if(!this.grow || !this.textSizeEl){
98 var ts = this.textSizeEl;
101 ts.appendChild(document.createTextNode(v));
104 Roo.fly(ts).setWidth(this.el.getWidth());
109 v = v.replace(/\n/g, '<p> </p>');
111 v += " \n ";
114 var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin));
115 if(h != this.lastHeight){
117 this.el.setHeight(h);
118 this.fireEvent("autosize", this, h);