-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js"><div id="cls-Ext.form.TextArea"></div>/**
- * @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
- * @xtype textarea
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-form-field-TextArea'>/**
+</span> * @class Ext.form.field.TextArea
+ * @extends Ext.form.field.Text
+
+This class creates a multiline text field, which can be used as a direct replacement for traditional
+textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
+fit its content.
+
+All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
+{@img Ext.form.TextArea/Ext.form.TextArea.png Ext.form.TextArea component}
+Example usage:
+
+ Ext.create('Ext.form.FormPanel', {
+ title : 'Sample TextArea',
+ width : 400,
+ bodyPadding: 10,
+ renderTo : Ext.getBody(),
+ items: [{
+ xtype : 'textareafield',
+ grow : true,
+ name : 'message',
+ fieldLabel: 'Message',
+ anchor : '100%'
+ }]
+ });
+
+Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}. These
+allow you to set the minimum and maximum grow heights for the textarea.
+
+ * @docauthor Robert Dougan <rob@sencha.com>
*/
-Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
- <div id="cfg-Ext.form.TextArea-growMin"></div>/**
- * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
- * (defaults to <tt>60</tt>)
+Ext.define('Ext.form.field.TextArea', {
+ extend:'Ext.form.field.Text',
+ alias: ['widget.textareafield', 'widget.textarea'],
+ alternateClassName: 'Ext.form.TextArea',
+ requires: ['Ext.XTemplate', 'Ext.layout.component.field.TextArea'],
+
+ fieldSubTpl: [
+ '<textarea id="{id}" ',
+ '<tpl if="name">name="{name}" </tpl>',
+ '<tpl if="rows">rows="{rows}" </tpl>',
+ '<tpl if="cols">cols="{cols}" </tpl>',
+ '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
+ 'class="{fieldCls} {typeCls}" ',
+ 'autocomplete="off">',
+ '</textarea>',
+ {
+ compiled: true,
+ disableFormats: true
+ }
+ ],
+
+<span id='Ext-form-field-TextArea-cfg-growMin'> /**
+</span> * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.field.Text#grow grow}=true</tt>
+ * (defaults to <tt>60</tt>)
*/
- growMin : 60,
- <div id="cfg-Ext.form.TextArea-growMax"></div>/**
- * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.TextField#grow grow}=true</tt>
- * (defaults to <tt>1000</tt>)
+ growMin: 60,
+
+<span id='Ext-form-field-TextArea-cfg-growMax'> /**
+</span> * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.field.Text#grow grow}=true</tt>
+ * (defaults to <tt>1000</tt>)
*/
growMax: 1000,
- growAppend : ' \n ',
- growPad : Ext.isWebKit ? -6 : 0,
- enterIsSpecial : false,
+<span id='Ext-form-field-TextArea-cfg-growAppend'> /**
+</span> * @cfg {String} growAppend
+ * A string that will be appended to the field's current value for the purposes of calculating the target
+ * field size. Only used when the {@link #grow} config is <tt>true</tt>. Defaults to a newline for TextArea
+ * to ensure there is always a space below the current line.
+ */
+ growAppend: '\n-',
- <div id="cfg-Ext.form.TextArea-preventScrollbars"></div>/**
- * @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is
- * in the field (equivalent to setting overflow: hidden, defaults to <tt>false</tt>)
+<span id='Ext-form-field-TextArea-cfg-cols'> /**
+</span> * @cfg {Number} cols An initial value for the 'cols' attribute on the textarea element. This is only
+ * used if the component has no configured {@link #width} and is not given a width by its container's
+ * layout. Defaults to <tt>20</tt>.
*/
- preventScrollbars: false,
- <div id="cfg-Ext.form.TextArea-autoCreate"></div>/**
- * @cfg {String/Object} autoCreate <p>A {@link Ext.DomHelper DomHelper} element spec, or true for a default
- * element spec. Used to create the {@link Ext.Component#getEl Element} which will encapsulate this Component.
- * See <tt>{@link Ext.Component#autoEl autoEl}</tt> for details. Defaults to:</p>
- * <pre><code>{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}</code></pre>
+ cols: 20,
+
+<span id='Ext-form-field-TextArea-cfg-cols'> /**
+</span> * @cfg {Number} cols An initial value for the 'cols' attribute on the textarea element. This is only
+ * used if the component has no configured {@link #width} and is not given a width by its container's
+ * layout. Defaults to <tt>4</tt>.
+ */
+ rows: 4,
+
+<span id='Ext-form-field-TextArea-cfg-enterIsSpecial'> /**
+</span> * @cfg {Boolean} enterIsSpecial
+ * True if you want the enter key to be classed as a <tt>special</tt> key. Special keys are generally navigation
+ * keys (arrows, space, enter). Setting the config property to <tt>true</tt> would mean that you could not insert
+ * returns into the textarea.
+ * (defaults to <tt>false</tt>)
*/
+ enterIsSpecial: false,
+
+<span id='Ext-form-field-TextArea-cfg-preventScrollbars'> /**
+</span> * @cfg {Boolean} preventScrollbars <tt>true</tt> to prevent scrollbars from appearing regardless of how much text is
+ * in the field. This option is only relevant when {@link #grow} is <tt>true</tt>. Equivalent to setting overflow: hidden, defaults to
+ * <tt>false</tt>.
+ */
+ preventScrollbars: false,
// 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);
- }
- },
+ componentLayout: 'textareafield',
- onDestroy : function(){
- Ext.destroy(this.textSizeEl);
- Ext.form.TextArea.superclass.onDestroy.call(this);
+ // private
+ onRender: function(ct, position) {
+ var me = this;
+ Ext.applyIf(me.subTplData, {
+ cols: me.cols,
+ rows: me.rows
+ });
+
+ me.callParent(arguments);
},
- fireKey : function(e){
- if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
- this.fireEvent("specialkey", this, e);
+ // private
+ afterRender: function(){
+ var me = this;
+
+ me.callParent(arguments);
+
+ if (me.grow) {
+ if (me.preventScrollbars) {
+ me.inputEl.setStyle('overflow', 'hidden');
+ }
+ me.inputEl.setHeight(me.growMin);
}
},
// private
- onKeyUp : function(e){
- if(!e.isNavKeyPress() || e.getKey() == e.ENTER){
- this.autoSize();
+ fireKey: function(e) {
+ if (e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() !== e.ENTER || e.hasModifier()))) {
+ this.fireEvent('specialkey', this, e);
}
- Ext.form.TextArea.superclass.onKeyUp.call(this, e);
},
- <div id="method-Ext.form.TextArea-autoSize"></div>/**
- * 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 {@link #autosize} event if the height changes.
+<span id='Ext-form-field-TextArea-method-autoSize'> /**
+</span> * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
+ * This only takes effect if <tt>{@link #grow} = true</tt>, and fires the {@link #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{
- v += this.growAppend;
- if(Ext.isIE){
- v = v.replace(/\n/g, '<br />');
+ autoSize: function() {
+ var me = this,
+ height;
+
+ if (me.grow && me.rendered) {
+ me.doComponentLayout();
+ height = me.inputEl.getHeight();
+ if (height !== me.lastInputHeight) {
+ me.fireEvent('autosize', height);
+ me.lastInputHeight = height;
}
}
- 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);
- }
+ },
+
+ // private
+ initAria: function() {
+ this.callParent(arguments);
+ this.getActionEl().dom.setAttribute('aria-multiline', true);
+ },
+
+<span id='Ext-form-field-TextArea-method-getBodyNaturalWidth'> /**
+</span> * @protected override
+ * To get the natural width of the textarea element, we do a simple calculation based on the
+ * 'cols' config. We use hard-coded numbers to approximate what browsers do natively,
+ * to avoid having to read any styles which would hurt performance.
+ */
+ getBodyNaturalWidth: function() {
+ return Math.round(this.cols * 6.5) + 20;
}
+
});
-Ext.reg('textarea', Ext.form.TextArea);</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+
+</pre>
+</body>
+</html>