docs/source/TextArea.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-field-TextArea'>/**
  19 </span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
  20  *
  21  * This class creates a multiline text field, which can be used as a direct replacement for traditional
  22  * textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
  23  * fit its content.
  24  *
  25  * All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
  26  *
  27  * Example usage:
  28  *
  29  *     @example
  30  *     Ext.create('Ext.form.FormPanel', {
  31  *         title      : 'Sample TextArea',
  32  *         width      : 400,
  33  *         bodyPadding: 10,
  34  *         renderTo   : Ext.getBody(),
  35  *         items: [{
  36  *             xtype     : 'textareafield',
  37  *             grow      : true,
  38  *             name      : 'message',
  39  *             fieldLabel: 'Message',
  40  *             anchor    : '100%'
  41  *         }]
  42  *     });
  43  *
  44  * Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
  45  * These allow you to set the minimum and maximum grow heights for the textarea.
  46  */
  47 Ext.define('Ext.form.field.TextArea', {
  48     extend:'Ext.form.field.Text',
  49     alias: ['widget.textareafield', 'widget.textarea'],
  50     alternateClassName: 'Ext.form.TextArea',
  51     requires: ['Ext.XTemplate', 'Ext.layout.component.field.TextArea'],
  52
  53     fieldSubTpl: [
  54         '&lt;textarea id=&quot;{id}&quot; ',
  55             '&lt;tpl if=&quot;name&quot;&gt;name=&quot;{name}&quot; &lt;/tpl&gt;',
  56             '&lt;tpl if=&quot;rows&quot;&gt;rows=&quot;{rows}&quot; &lt;/tpl&gt;',
  57             '&lt;tpl if=&quot;cols&quot;&gt;cols=&quot;{cols}&quot; &lt;/tpl&gt;',
  58             '&lt;tpl if=&quot;tabIdx&quot;&gt;tabIndex=&quot;{tabIdx}&quot; &lt;/tpl&gt;',
  59             'class=&quot;{fieldCls} {typeCls}&quot; ',
  60             'autocomplete=&quot;off&quot;&gt;',
  61         '&lt;/textarea&gt;',
  62         {
  63             compiled: true,
  64             disableFormats: true
  65         }
  66     ],
  67
  68 <span id='Ext-form-field-TextArea-cfg-growMin'>    /**
  69 </span>     * @cfg {Number} growMin
  70      * The minimum height to allow when {@link #grow}=true
  71      */
  72     growMin: 60,
  73
  74 <span id='Ext-form-field-TextArea-cfg-growMax'>    /**
  75 </span>     * @cfg {Number} growMax
  76      * The maximum height to allow when {@link #grow}=true
  77      */
  78     growMax: 1000,
  79
  80 <span id='Ext-form-field-TextArea-cfg-growAppend'>    /**
  81 </span>     * @cfg {String} growAppend
  82      * A string that will be appended to the field's current value for the purposes of calculating the target field
  83      * size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
  84      * always a space below the current line.
  85      */
  86     growAppend: '\n-',
  87
  88 <span id='Ext-form-field-TextArea-cfg-cols'>    /**
  89 </span>     * @cfg {Number} cols
  90      * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
  91      * configured {@link #width} and is not given a width by its container's layout.
  92      */
  93     cols: 20,
  94
  95 <span id='Ext-form-field-TextArea-cfg-cols'>    /**
  96 </span>     * @cfg {Number} cols
  97      * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
  98      * configured {@link #width} and is not given a width by its container's layout.
  99      */
 100     rows: 4,
 101
 102 <span id='Ext-form-field-TextArea-cfg-enterIsSpecial'>    /**
 103 </span>     * @cfg {Boolean} enterIsSpecial
 104      * True if you want the enter key to be classed as a special key. Special keys are generally navigation keys
 105      * (arrows, space, enter). Setting the config property to true would mean that you could not insert returns into the
 106      * textarea.
 107      */
 108     enterIsSpecial: false,
 109
 110 <span id='Ext-form-field-TextArea-cfg-preventScrollbars'>    /**
 111 </span>     * @cfg {Boolean} preventScrollbars
 112      * true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
 113      * relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
 114      */
 115     preventScrollbars: false,
 116
 117     // private
 118     componentLayout: 'textareafield',
 119
 120     // private
 121     onRender: function(ct, position) {
 122         var me = this;
 123         Ext.applyIf(me.subTplData, {
 124             cols: me.cols,
 125             rows: me.rows
 126         });
 127
 128         me.callParent(arguments);
 129     },
 130
 131     // private
 132     afterRender: function(){
 133         var me = this;
 134
 135         me.callParent(arguments);
 136
 137         if (me.grow) {
 138             if (me.preventScrollbars) {
 139                 me.inputEl.setStyle('overflow', 'hidden');
 140             }
 141             me.inputEl.setHeight(me.growMin);
 142         }
 143     },
 144
 145     // private
 146     fireKey: function(e) {
 147         if (e.isSpecialKey() &amp;&amp; (this.enterIsSpecial || (e.getKey() !== e.ENTER || e.hasModifier()))) {
 148             this.fireEvent('specialkey', this, e);
 149         }
 150     },
 151
 152 <span id='Ext-form-field-TextArea-method-autoSize'>    /**
 153 </span>     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
 154      * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
 155      */
 156     autoSize: function() {
 157         var me = this,
 158             height;
 159
 160         if (me.grow &amp;&amp; me.rendered) {
 161             me.doComponentLayout();
 162             height = me.inputEl.getHeight();
 163             if (height !== me.lastInputHeight) {
 164                 me.fireEvent('autosize', height);
 165                 me.lastInputHeight = height;
 166             }
 167         }
 168     },
 169
 170     // private
 171     initAria: function() {
 172         this.callParent(arguments);
 173         this.getActionEl().dom.setAttribute('aria-multiline', true);
 174     },
 175
 176 <span id='Ext-form-field-TextArea-method-getBodyNaturalWidth'>    /**
 177 </span>     * To get the natural width of the textarea element, we do a simple calculation based on the 'cols' config.
 178      * We use hard-coded numbers to approximate what browsers do natively, to avoid having to read any styles which
 179      * would hurt performance. Overrides Labelable method.
 180      * @protected
 181      */
 182     getBodyNaturalWidth: function() {
 183         return Math.round(this.cols * 6.5) + 20;
 184     }
 185
 186 });
 187
 188 </pre>
 189 </body>
 190 </html>