Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / TextArea.html
index d47ac26..78536a5 100644 (file)
@@ -1,37 +1,48 @@
-<!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'>/**
-</span></span> * @class Ext.form.field.TextArea
- * @extends Ext.form.field.Text
-
-This class creates a multiline text field, which can be used as a direct replacement for traditional 
-textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to 
-fit its content.
-
-All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
-{@img Ext.form.TextArea/Ext.form.TextArea.png Ext.form.TextArea component}
-Example usage:
-
-    Ext.create('Ext.form.FormPanel', {
-        title      : 'Sample TextArea',
-        width      : 400,
-        bodyPadding: 10,
-        renderTo   : Ext.getBody(),
-        items: [{
-            xtype     : 'textareafield',
-            grow      : true,
-            name      : 'message',
-            fieldLabel: 'Message',
-            anchor    : '100%'
-        }]
-    }); 
-
-Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}. These 
-allow you to set the minimum and maximum grow heights for the textarea.
-
- * @constructor
- * Creates a new TextArea
- * @param {Object} config Configuration options
- * @xtype textareafield
- * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-form-field-TextArea'>/**
+</span> * @docauthor Robert Dougan &lt;rob@sencha.com&gt;
+ *
+ * This class creates a multiline text field, which can be used as a direct replacement for traditional
+ * textarea fields. In addition, it supports automatically {@link #grow growing} the height of the textarea to
+ * fit its content.
+ *
+ * All of the configuration options from {@link Ext.form.field.Text} can be used on TextArea.
+ *
+ * Example usage:
+ *
+ *     @example
+ *     Ext.create('Ext.form.FormPanel', {
+ *         title      : 'Sample TextArea',
+ *         width      : 400,
+ *         bodyPadding: 10,
+ *         renderTo   : Ext.getBody(),
+ *         items: [{
+ *             xtype     : 'textareafield',
+ *             grow      : true,
+ *             name      : 'message',
+ *             fieldLabel: 'Message',
+ *             anchor    : '100%'
+ *         }]
+ *     });
+ *
+ * Some other useful configuration options when using {@link #grow} are {@link #growMin} and {@link #growMax}.
+ * These allow you to set the minimum and maximum grow heights for the textarea.
  */
 Ext.define('Ext.form.field.TextArea', {
     extend:'Ext.form.field.Text',
@@ -54,53 +65,52 @@ Ext.define('Ext.form.field.TextArea', {
         }
     ],
 
-<span id='Ext-form.field.TextArea-cfg-growMin'>    /**
-</span>     * @cfg {Number} growMin The minimum height to allow when &lt;tt&gt;{@link Ext.form.field.Text#grow grow}=true&lt;/tt&gt;
-     * (defaults to &lt;tt&gt;60&lt;/tt&gt;)
+<span id='Ext-form-field-TextArea-cfg-growMin'>    /**
+</span>     * @cfg {Number} growMin
+     * The minimum height to allow when {@link #grow}=true
      */
     growMin: 60,
 
-<span id='Ext-form.field.TextArea-cfg-growMax'>    /**
-</span>     * @cfg {Number} growMax The maximum height to allow when &lt;tt&gt;{@link Ext.form.field.Text#grow grow}=true&lt;/tt&gt;
-     * (defaults to &lt;tt&gt;1000&lt;/tt&gt;)
+<span id='Ext-form-field-TextArea-cfg-growMax'>    /**
+</span>     * @cfg {Number} growMax
+     * The maximum height to allow when {@link #grow}=true
      */
     growMax: 1000,
 
-<span id='Ext-form.field.TextArea-cfg-growAppend'>    /**
+<span id='Ext-form-field-TextArea-cfg-growAppend'>    /**
 </span>     * @cfg {String} growAppend
-     * A string that will be appended to the field's current value for the purposes of calculating the target
-     * field size. Only used when the {@link #grow} config is &lt;tt&gt;true&lt;/tt&gt;. Defaults to a newline for TextArea
-     * to ensure there is always a space below the current line.
+     * A string that will be appended to the field's current value for the purposes of calculating the target field
+     * size. Only used when the {@link #grow} config is true. Defaults to a newline for TextArea to ensure there is
+     * always a space below the current line.
      */
     growAppend: '\n-',
 
-<span id='Ext-form.field.TextArea-cfg-cols'>    /**
-</span>     * @cfg {Number} cols An initial value for the 'cols' attribute on the textarea element. This is only
-     * used if the component has no configured {@link #width} and is not given a width by its container's
-     * layout. Defaults to &lt;tt&gt;20&lt;/tt&gt;.
+<span id='Ext-form-field-TextArea-cfg-cols'>    /**
+</span>     * @cfg {Number} cols
+     * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
+     * configured {@link #width} and is not given a width by its container's layout.
      */
     cols: 20,
 
-<span id='Ext-form.field.TextArea-cfg-cols'>    /**
-</span>     * @cfg {Number} cols An initial value for the 'cols' attribute on the textarea element. This is only
-     * used if the component has no configured {@link #width} and is not given a width by its container's
-     * layout. Defaults to &lt;tt&gt;4&lt;/tt&gt;.
+<span id='Ext-form-field-TextArea-cfg-cols'>    /**
+</span>     * @cfg {Number} cols
+     * An initial value for the 'cols' attribute on the textarea element. This is only used if the component has no
+     * configured {@link #width} and is not given a width by its container's layout.
      */
     rows: 4,
 
-<span id='Ext-form.field.TextArea-cfg-enterIsSpecial'>    /**
+<span id='Ext-form-field-TextArea-cfg-enterIsSpecial'>    /**
 </span>     * @cfg {Boolean} enterIsSpecial
-     * 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
-     * keys (arrows, space, enter). Setting the config property to &lt;tt&gt;true&lt;/tt&gt; would mean that you could not insert
-     * returns into the textarea.
-     * (defaults to &lt;tt&gt;false&lt;/tt&gt;)
+     * True if you want the enter key to be classed as a special key. Special keys are generally navigation keys
+     * (arrows, space, enter). Setting the config property to true would mean that you could not insert returns into the
+     * textarea.
      */
     enterIsSpecial: false,
 
-<span id='Ext-form.field.TextArea-cfg-preventScrollbars'>    /**
-</span>     * @cfg {Boolean} preventScrollbars &lt;tt&gt;true&lt;/tt&gt; to prevent scrollbars from appearing regardless of how much text is
-     * 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
-     * &lt;tt&gt;false&lt;/tt&gt;.
+<span id='Ext-form-field-TextArea-cfg-preventScrollbars'>    /**
+</span>     * @cfg {Boolean} preventScrollbars
+     * true to prevent scrollbars from appearing regardless of how much text is in the field. This option is only
+     * relevant when {@link #grow} is true. Equivalent to setting overflow: hidden.
      */
     preventScrollbars: false,
 
@@ -139,10 +149,9 @@ Ext.define('Ext.form.field.TextArea', {
         }
     },
 
-<span id='Ext-form.field.TextArea-method-autoSize'>    /**
-</span>     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
-     * This only takes effect if &lt;tt&gt;{@link #grow} = true&lt;/tt&gt;, and fires the {@link #autosize} event if
-     * the height changes.
+<span id='Ext-form-field-TextArea-method-autoSize'>    /**
+</span>     * Automatically grows the field to accomodate the height of the text up to the maximum field height allowed. This
+     * only takes effect if {@link #grow} = true, and fires the {@link #autosize} event if the height changes.
      */
     autoSize: function() {
         var me = this,
@@ -164,11 +173,11 @@ Ext.define('Ext.form.field.TextArea', {
         this.getActionEl().dom.setAttribute('aria-multiline', true);
     },
 
-<span id='Ext-form.field.TextArea-method-getBodyNaturalWidth'>    /**
-</span>     * @protected override
-     * To get the natural width of the textarea element, we do a simple calculation based on the
-     * 'cols' config. We use hard-coded numbers to approximate what browsers do natively,
-     * to avoid having to read any styles which would hurt performance.
+<span id='Ext-form-field-TextArea-method-getBodyNaturalWidth'>    /**
+</span>     * To get the natural width of the textarea element, we do a simple calculation based on the 'cols' config.
+     * We use hard-coded numbers to approximate what browsers do natively, to avoid having to read any styles which
+     * would hurt performance. Overrides Labelable method.
+     * @protected
      */
     getBodyNaturalWidth: function() {
         return Math.round(this.cols * 6.5) + 20;
@@ -176,4 +185,6 @@ Ext.define('Ext.form.field.TextArea', {
 
 });
 
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>