[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 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 : ' \n ', |
---|
| 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 = "  "; |
---|
| 105 | }else{ |
---|
| 106 | v += this.growAppend; |
---|
| 107 | if(Ext.isIE){ |
---|
| 108 | v = v.replace(/\n/g, ' <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); |
---|