2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
10 * @class Ext.form.TextArea
\r
11 * @extends Ext.form.TextField
\r
12 * Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds
\r
13 * support for auto-sizing.
\r
15 * Creates a new TextArea
\r
16 * @param {Object} config Configuration options
\r
18 Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
\r
20 * @cfg {Number} growMin The minimum height to allow when grow = true (defaults to 60)
\r
24 * @cfg {Number} growMax The maximum height to allow when grow = true (defaults to 1000)
\r
27 growAppend : ' \n ',
\r
30 enterIsSpecial : false,
\r
33 * @cfg {Boolean} preventScrollbars True to prevent scrollbars from appearing regardless of how much text is
\r
34 * in the field (equivalent to setting overflow: hidden, defaults to false)
\r
36 preventScrollbars: false,
\r
38 * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
\r
39 * {tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"})
\r
43 onRender : function(ct, position){
\r
45 this.defaultAutoCreate = {
\r
47 style:"width:100px;height:60px;",
\r
51 Ext.form.TextArea.superclass.onRender.call(this, ct, position);
\r
53 this.textSizeEl = Ext.DomHelper.append(document.body, {
\r
54 tag: "pre", cls: "x-form-grow-sizer"
\r
56 if(this.preventScrollbars){
\r
57 this.el.setStyle("overflow", "hidden");
\r
59 this.el.setHeight(this.growMin);
\r
63 onDestroy : function(){
\r
64 if(this.textSizeEl){
\r
65 Ext.removeNode(this.textSizeEl);
\r
67 Ext.form.TextArea.superclass.onDestroy.call(this);
\r
70 fireKey : function(e){
\r
71 if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
\r
72 this.fireEvent("specialkey", this, e);
\r
77 onKeyUp : function(e){
\r
78 if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
\r
81 Ext.form.TextArea.superclass.onKeyUp.call(this, e);
\r
85 * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
\r
86 * This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.
\r
88 autoSize : function(){
\r
89 if(!this.grow || !this.textSizeEl){
\r
93 var v = el.dom.value;
\r
94 var ts = this.textSizeEl;
\r
96 ts.appendChild(document.createTextNode(v));
\r
99 Ext.fly(ts).setWidth(this.el.getWidth());
\r
101 v = "  ";
\r
104 v = v.replace(/\n/g, '<p> </p>');
\r
106 v += this.growAppend;
\r
109 var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin)+this.growPad);
\r
110 if(h != this.lastHeight){
\r
111 this.lastHeight = h;
\r
112 this.el.setHeight(h);
\r
113 this.fireEvent("autosize", this, h);
\r
117 Ext.reg('textarea', Ext.form.TextArea);