Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Label.html
index 65cf892..242235d 100644 (file)
@@ -1,75 +1,87 @@
-<!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.Label-method-constructor'><span id='Ext-form.Label'>/**
-</span></span> * @class Ext.form.Label
- * @extends Ext.Component
-
-Produces a standalone `&lt;label /&gt;` element which can be inserted into a form and be associated with a field
-in that form using the {@link #forId} property.
-
-**NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
-and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
-etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
-Ext.form.Label should only be used when your layout can not be achieved with the standard
-{@link Ext.form.Labelable field layout}.
-
-You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
-you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
-of that field.
-
-The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
-difference between the two is that the former will automatically escape HTML characters when rendering, while
-the latter will not.
-{@img Ext.form.Label/Ext.form.Label.png Ext.form.Label component}
-#Example usage:#
-
-This example creates a Label after its associated Text field, an arrangement that cannot currently
-be achieved using the standard Field layout's labelAlign.
-
-    Ext.create('Ext.form.Panel', {
-        title: 'Field with Label',
-        width: 400,
-        bodyPadding: 10,
-        renderTo: Ext.getBody(),
-        layout: {
-            type: 'hbox',
-            align: 'middle'
-        },
-        items: [{
-            xtype: 'textfield',
-            hideLabel: true,
-            flex: 1
-        }, {
-            xtype: 'label',
-            forId: 'myFieldId',
-            text: 'My Awesome Field',
-            margins: '0 0 0 10'
-        }]
-    });
-
- * @constructor
- * Creates a new Label component.
- * @param {Ext.core.Element/String/Object} config The configuration options.
+<!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-Label'>/**
+</span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
+ *
+ * Produces a standalone `&lt;label /&gt;` element which can be inserted into a form and be associated with a field
+ * in that form using the {@link #forId} property.
+ * 
+ * **NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
+ * and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
+ * etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
+ * Ext.form.Label should only be used when your layout can not be achieved with the standard
+ * {@link Ext.form.Labelable field layout}.
+ * 
+ * You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
+ * you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
+ * of that field.
+ * 
+ * The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
+ * difference between the two is that the former will automatically escape HTML characters when rendering, while
+ * the latter will not.
+ *
+ * # Example
+ * 
+ * This example creates a Label after its associated Text field, an arrangement that cannot currently
+ * be achieved using the standard Field layout's labelAlign.
  * 
- * @xtype label
- * @markdown
- * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
+ *     @example
+ *     Ext.create('Ext.form.Panel', {
+ *         title: 'Field with Label',
+ *         width: 400,
+ *         bodyPadding: 10,
+ *         renderTo: Ext.getBody(),
+ *         layout: {
+ *             type: 'hbox',
+ *             align: 'middle'
+ *         },
+ *         items: [{
+ *             xtype: 'textfield',
+ *             hideLabel: true,
+ *             flex: 1
+ *         }, {
+ *             xtype: 'label',
+ *             forId: 'myFieldId',
+ *             text: 'My Awesome Field',
+ *             margins: '0 0 0 10'
+ *         }]
+ *     });
  */
 Ext.define('Ext.form.Label', {
     extend:'Ext.Component',
     alias: 'widget.label',
     requires: ['Ext.util.Format'],
 
-<span id='Ext-form.Label-cfg-text'>    /**
-</span>     * @cfg {String} text The plain text to display within the label (defaults to ''). If you need to include HTML
+<span id='Ext-form-Label-cfg-text'>    /**
+</span>     * @cfg {String} [text='']
+     * The plain text to display within the label. If you need to include HTML
      * tags within the label's innerHTML, use the {@link #html} config instead.
      */
-<span id='Ext-form.Label-cfg-forId'>    /**
-</span>     * @cfg {String} forId The id of the input element to which this label will be bound via the standard HTML 'for'
+<span id='Ext-form-Label-cfg-forId'>    /**
+</span>     * @cfg {String} forId
+     * The id of the input element to which this label will be bound via the standard HTML 'for'
      * attribute. If not specified, the attribute will not be added to the label. In most cases you will be
      * associating the label with a {@link Ext.form.field.Base} component, so you should make sure this matches
      * the {@link Ext.form.field.Base#inputId inputId} of that field.
      */
-<span id='Ext-form.Label-cfg-html'>    /**
-</span>     * @cfg {String} html An HTML fragment that will be used as the label's innerHTML (defaults to '').
+<span id='Ext-form-Label-cfg-html'>    /**
+</span>     * @cfg {String} [html='']
+     * An HTML fragment that will be used as the label's innerHTML.
      * Note that if {@link #text} is specified it will take precedence and this value will be ignored.
      */
     
@@ -84,13 +96,13 @@ Ext.define('Ext.form.Label', {
         };
     },
 
-<span id='Ext-form.Label-method-setText'>    /**
+<span id='Ext-form-Label-method-setText'>    /**
 </span>     * Updates the label's innerHTML with the specified string.
      * @param {String} text The new label text
-     * @param {Boolean} encode (optional) False to skip HTML-encoding the text when rendering it
-     * to the label (defaults to true which encodes the value). This might be useful if you want to include
-     * tags in the label's innerHTML rather than rendering them as string literals per the default logic.
-     * @return {Label} this
+     * @param {Boolean} [encode=true] False to skip HTML-encoding the text when rendering it
+     * to the label. This might be useful if you want to include tags in the label's innerHTML rather
+     * than rendering them as string literals per the default logic.
+     * @return {Ext.form.Label} this
      */
     setText : function(text, encode){
         var me = this;
@@ -111,4 +123,6 @@ Ext.define('Ext.form.Label', {
     }
 });
 
-</pre></pre></body></html>
\ No newline at end of file
+</pre>
+</body>
+</html>