docs/source/TextArea.html

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