/**
- * @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.
-
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
- * @xtype textareafield
- * @docauthor Robert Dougan <rob@sencha.com>
+
+
+
+
+ The source code
+
+
+
+
+
+
+
/**
+ * @docauthor Robert Dougan <rob@sencha.com>
+ *
+ * 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.
+ *
+ * Example usage:
+ *
+ * @example
+ * 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.
*/
Ext.define('Ext.form.field.TextArea', {
extend:'Ext.form.field.Text',
@@ -54,53 +65,52 @@ Ext.define('Ext.form.field.TextArea', {
}
],
- /**
- * @cfg {Number} growMin The minimum height to allow when <tt>{@link Ext.form.field.Text#grow grow}=true</tt>
- * (defaults to <tt>60</tt>)
+ /**
+ * @cfg {Number} growMin
+ * The minimum height to allow when {@link #grow}=true
*/
growMin: 60,
- /**
- * @cfg {Number} growMax The maximum height to allow when <tt>{@link Ext.form.field.Text#grow grow}=true</tt>
- * (defaults to <tt>1000</tt>)
+ /**
+ * @cfg {Number} growMax
+ * The maximum height to allow when {@link #grow}=true
*/
growMax: 1000,
- /**
+ /**
* @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.
+ * 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 true. Defaults to a newline for TextArea to ensure there is
+ * always a space below the current line.
*/
growAppend: '\n-',
- /**
- * @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>.
+ /**
+ * @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.
*/
cols: 20,
- /**
- * @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>.
+ /**
+ * @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.
*/
rows: 4,
- /**
+ /**
* @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>)
+ * True if you want the enter key to be classed as a special key. Special keys are generally navigation keys
+ * (arrows, space, enter). Setting the config property to true would mean that you could not insert returns into the
+ * textarea.
*/
enterIsSpecial: false,
- /**
- * @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>.
+ /**
+ * @cfg {Boolean} preventScrollbars
+ * true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
+ * relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
*/
preventScrollbars: false,
@@ -139,10 +149,9 @@ Ext.define('Ext.form.field.TextArea', {
}
},
- /**
- * 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.
+ /**
+ * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
+ * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
*/
autoSize: function() {
var me = this,
@@ -164,11 +173,11 @@ Ext.define('Ext.form.field.TextArea', {
this.getActionEl().dom.setAttribute('aria-multiline', true);
},
- /**
- * @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.
+ /**
+ * 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. Overrides Labelable method.
+ * @protected
*/
getBodyNaturalWidth: function() {
return Math.round(this.cols * 6.5) + 20;
@@ -176,4 +185,6 @@ Ext.define('Ext.form.field.TextArea', {
});
-