3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @docauthor Robert Dougan <rob@sencha.com>
18 * This class creates a multiline text field, which can be used as a direct replacement for traditional
19 * textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
22 * All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
27 * Ext.create('Ext.form.FormPanel', {
28 * title : 'Sample TextArea',
31 * renderTo : Ext.getBody(),
33 * xtype : 'textareafield',
36 * fieldLabel: 'Message',
41 * Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
42 * These allow you to set the minimum and maximum grow heights for the textarea.
44 Ext.define('Ext.form.field.TextArea', {
45 extend:'Ext.form.field.Text',
46 alias: ['widget.textareafield', 'widget.textarea'],
47 alternateClassName: 'Ext.form.TextArea',
48 requires: ['Ext.XTemplate', 'Ext.layout.component.field.TextArea'],
51 '<textarea id="{id}" ',
52 '<tpl if="name">name="{name}" </tpl>',
53 '<tpl if="rows">rows="{rows}" </tpl>',
54 '<tpl if="cols">cols="{cols}" </tpl>',
55 '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
56 'class="{fieldCls} {typeCls}" ',
57 'autocomplete="off">',
66 * @cfg {Number} growMin
67 * The minimum height to allow when {@link #grow}=true
72 * @cfg {Number} growMax
73 * The maximum height to allow when {@link #grow}=true
78 * @cfg {String} growAppend
79 * A string that will be appended to the field's current value for the purposes of calculating the target field
80 * size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
81 * always a space below the current line.
87 * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
88 * configured {@link #width} and is not given a width by its container's layout.
94 * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
95 * configured {@link #width} and is not given a width by its container's layout.
100 * @cfg {Boolean} enterIsSpecial
101 * True if you want the enter key to be classed as a special key. Special keys are generally navigation keys
102 * (arrows, space, enter). Setting the config property to true would mean that you could not insert returns into the
105 enterIsSpecial: false,
108 * @cfg {Boolean} preventScrollbars
109 * true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
110 * relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
112 preventScrollbars: false,
115 componentLayout: 'textareafield',
118 onRender: function(ct, position) {
120 Ext.applyIf(me.subTplData, {
125 me.callParent(arguments);
129 afterRender: function(){
132 me.callParent(arguments);
135 if (me.preventScrollbars) {
136 me.inputEl.setStyle('overflow', 'hidden');
138 me.inputEl.setHeight(me.growMin);
143 fireKey: function(e) {
144 if (e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() !== e.ENTER || e.hasModifier()))) {
145 this.fireEvent('specialkey', this, e);
150 * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
151 * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
153 autoSize: function() {
157 if (me.grow && me.rendered) {
158 me.doComponentLayout();
159 height = me.inputEl.getHeight();
160 if (height !== me.lastInputHeight) {
161 me.fireEvent('autosize', height);
162 me.lastInputHeight = height;
168 initAria: function() {
169 this.callParent(arguments);
170 this.getActionEl().dom.setAttribute('aria-multiline', true);
174 * To get the natural width of the textarea element, we do a simple calculation based on the 'cols' config.
175 * We use hard-coded numbers to approximate what browsers do natively, to avoid having to read any styles which
176 * would hurt performance. Overrides Labelable method.
179 getBodyNaturalWidth: function() {
180 return Math.round(this.cols * 6.5) + 20;