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