X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/form/field/TextArea.js diff --git a/src/form/field/TextArea.js b/src/form/field/TextArea.js index 54ac0c0c..242fa31f 100644 --- a/src/form/field/TextArea.js +++ b/src/form/field/TextArea.js @@ -13,35 +13,33 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @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 + * + * 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', @@ -65,52 +63,51 @@ Ext.define('Ext.form.field.TextArea', { ], /** - * @cfg {Number} growMin The minimum height to allow when {@link Ext.form.field.Text#grow grow}=true - * (defaults to 60) + * @cfg {Number} growMin + * The minimum height to allow when {@link #grow}=true */ growMin: 60, /** - * @cfg {Number} growMax The maximum height to allow when {@link Ext.form.field.Text#grow grow}=true - * (defaults to 1000) + * @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 true. 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 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. */ 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 4. + * @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 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. - * (defaults to false) + * 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 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, defaults to - * false. + * @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, @@ -150,9 +147,8 @@ 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 {@link #grow} = true, 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, @@ -175,10 +171,10 @@ Ext.define('Ext.form.field.TextArea', { }, /** - * @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;