/**
 * 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 free form 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:
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * Ext.create('Ext.form.Panel', {
 *     fullscreen: true,
 *     items: [
 *         {
 *             xtype: 'fieldset',
 *             title: 'About you',
 *             items: [
 *                 {
 *                     xtype: 'textfield',
 *                     label: 'Name',
 *                     name: 'name'
 *                 },
 *                 {
 *                     xtype: 'textareafield',
 *                     label: 'Bio',
 *                     maxRows: 4,
 *                     name: 'bio'
 *                 }
 *             ]
 *         }
 *     ]
 * });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtContainer, ExtFormPanel, ExtTextAreaField } from '@sencha/ext-react';
 *
 * export default class MyExample extends Component {
 *     render() {
 *         return (
 *             <ExtContainer layout="center">
 *                 <ExtFormPanel shadow>
 *                     <ExtTextAreaField
 *                         label="Description"
 *                         width="300"
 *                         maxRows={10}
 *                     />
 *                 </ExtFormPanel>
 *             </ExtContainer>
 *         )
 *     }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 * import { Component } from '@angular/core'
 * declare var Ext: any;
 *
 * @Component({
 *     selector: 'app-root-1',
 *     styles: [``],
 *     template: `
 *         <ExtContainer layout="center">
 *              <ExtFormPanel shadow="true" >
 *                 <ExtTextAreaField
 *                     label="Description"
 *                     width="300"
 *                     [maxRows]="10"
 *                 >
 *                 </ExtTextAreaField>
 *             </ExtFormPanel>
 *         </ExtContainer>
 *     `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-container layout="center">
 *    <ext-formpanel shadow="true">
 *        <ext-textareafield
 *            label="Description"
 *            width="300"
 *            maxRows="10"
 *        >
 *        </ext-textareafield>
 *    </ext-formpanel>
 * </ext-container>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 })
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-formpanel.component';
 * import '@sencha/ext-web-components/dist/ext-textareafield.component';
 *
 * export default class TextAreaFieldComponent {} 
 * ```
 *
 * 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',
 *         placeHolder: 'Tell us about yourself...'
 *     });
 */
Ext.define('Ext.field.TextArea', {
    extend: 'Ext.field.Text',
    xtype: 'textareafield',
 
    alternateClassName: 'Ext.form.TextArea',
 
    config: {
        /**
         * @cfg autoCapitalize
         * @inheritdoc
         */
        autoCapitalize: false,
 
        /**
         * @cfg {Number} maxRows
         * The maximum number of lines made visible by the input.
         */
        maxRows: null,
 
        /**
         * @cfg clearable
         * @inheritdoc
         */
        clearable: false
    },
 
    /**
     * @property tag
     * @inheritdoc
     */
    tag: 'textarea',
 
    /**
     * @property classCls
     * @inheritdoc
     */
    classCls: Ext.baseCSSPrefix + 'textareafield',
 
    //<debug>
    applyMaxRows: function(maxRows) {
        if (maxRows !== null && typeof maxRows !== 'number') {
            throw new Error(
                "Ext.field.TextArea: [applyMaxRows] trying to pass a value which is not a number"
            );
        }
 
        return maxRows;
    },
    //</debug>
 
    updateMaxRows: function(newRows) {
        this.setInputAttribute('rows', newRows);
    },
 
    doKeyUp: function(me) {
        // Do not call parent - we don't want to fire action on enter key press
        this.syncEmptyState();
    }
});