/* * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com * * http://extjs.com/license */ /** * @class Ext.form.TextArea * @extends Ext.form.TextField Multiline text field. Can be used as a direct * replacement for traditional textarea fields, plus adds support for * auto-sizing. * @constructor Creates a new TextArea * @param {Object} * config Configuration options */ Ext.form.TextArea = Ext.extend(Ext.form.TextField, { /** * @cfg {Number} growMin The minimum height to allow when grow = * true (defaults to 60) */ growMin : 60, /** * @cfg {Number} growMax The maximum height to allow when grow = * true (defaults to 1000) */ growMax : 1000, growAppend : ' \n ', growPad : 0, enterIsSpecial : false, /** * @cfg {Boolean} preventScrollbars True to prevent scrollbars from * appearing regardless of how much text is in the field * (equivalent to setting overflow: hidden, defaults to false) */ preventScrollbars : false, /** * @cfg {String/Object} autoCreate A DomHelper element spec, or true * for a default element spec (defaults to {tag: "textarea", * style: "width:100px;height:60px;", autocomplete: "off"}) */ // private onRender : function(ct, position) { if (!this.el) { this.defaultAutoCreate = { tag : "textarea", style : "width:100px;height:60px;", autocomplete : "off" }; } Ext.form.TextArea.superclass.onRender.call(this, ct, position); if (this.grow) { this.textSizeEl = Ext.DomHelper.append(document.body, { tag : "pre", cls : "x-form-grow-sizer" }); if (this.preventScrollbars) { this.el.setStyle("overflow", "hidden"); } this.el.setHeight(this.growMin); } }, onDestroy : function() { if (this.textSizeEl) { Ext.removeNode(this.textSizeEl); } Ext.form.TextArea.superclass.onDestroy.call(this); }, fireKey : function(e) { if (e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e .hasModifier()))) { this.fireEvent("specialkey", this, e); } }, // private onKeyUp : function(e) { if (!e.isNavKeyPress() || e.getKey() == e.ENTER) { this.autoSize(); } }, /** * Automatically grows the field to accomodate the height of the * text up to the maximum field height allowed. This only takes * effect if grow = true, and fires the autosize event if the height * changes. */ autoSize : function() { if (!this.grow || !this.textSizeEl) { return; } var el = this.el; var v = el.dom.value; var ts = this.textSizeEl; ts.innerHTML = ''; ts.appendChild(document.createTextNode(v)); v = ts.innerHTML; Ext.fly(ts).setWidth(this.el.getWidth()); if (v.length < 1) { v = " "; } else { if (Ext.isIE) { v = v.replace(/\n/g, '
'); } v += this.growAppend; } ts.innerHTML = v; var h = Math.min(this.growMax, Math.max(ts.offsetHeight, this.growMin) + this.growPad); if (h != this.lastHeight) { this.lastHeight = h; this.el.setHeight(h); this.fireEvent("autosize", this, h); } } }); Ext.reg('textarea', Ext.form.TextArea);