/** * Creates an HTML textarea field on the page. This is useful whenever you need the user to enter large amounts of text * (i.e. more than a few words). Typically, text entry on mobile devices is not a pleasant experience for the user so * it's good to limit your use of text areas to only those occasions when freeform text is required or alternative * input methods like select boxes or radio buttons are not possible. Text Areas are usually created inside forms, like * this: * * Ext.create('Ext.form.Panel', { * tbar: { * text: 'About you' * }, * * items: [ * { * xtype: 'textfield', * label: 'Name', * name: 'name' * }, * { * xtype: 'textareafield', * label: 'Bio', * {@link #maxRows}: 4, * name: 'bio' * } * ] * }); * * In the example above we're creating a form with a {@link Ext.field.Text text field} for the user's name and a text * area for their bio. We used the {@link #maxRows} configuration on the text area to tell it to grow to a maximum of 4 * rows of text before it starts using a scroll bar inside the text area to scroll the text. * * We can also create a text area outside the context of a form, like this: * * This creates two text fields inside a form. Text Fields can also be created outside of a Form, like this: * * Ext.create('Ext.field.TextArea', { * label: 'About You', * {@link #placeHolder}: 'Tell us about yourself...' * }); */ Ext.define('Ext.field.TextArea', { extend: 'Ext.field.Text', xtype: 'textareafield', requires: ['Ext.field.TextAreaInput'], alternateClassName: 'Ext.form.TextArea', config: { // @inherit ui: 'textarea', // @inherit autoCapitalize: false, // @inherit component: { xtype: 'textareainput' }, /** * @cfg {Number} maxRows The maximum number of lines made visible by the input. * @accessor */ maxRows: null }, // @private updateMaxRows: function(newRows) { this.getComponent().setMaxRows(newRows); } });