docs/source/Label.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-Label'>/**
  19 </span> * @docauthor Jason Johnston &lt;jason@sencha.com&gt;
  20  *
  21  * Produces a standalone `&lt;label /&gt;` element which can be inserted into a form and be associated with a field
  22  * in that form using the {@link #forId} property.
  23  *
  24  * **NOTE:** in most cases it will be more appropriate to use the {@link Ext.form.Labelable#fieldLabel fieldLabel}
  25  * and associated config properties ({@link Ext.form.Labelable#labelAlign}, {@link Ext.form.Labelable#labelWidth},
  26  * etc.) in field components themselves, as that allows labels to be uniformly sized throughout the form.
  27  * Ext.form.Label should only be used when your layout can not be achieved with the standard
  28  * {@link Ext.form.Labelable field layout}.
  29  *
  30  * You will likely be associating the label with a field component that extends {@link Ext.form.field.Base}, so
  31  * you should make sure the {@link #forId} is set to the same value as the {@link Ext.form.field.Base#inputId inputId}
  32  * of that field.
  33  *
  34  * The label's text can be set using either the {@link #text} or {@link #html} configuration properties; the
  35  * difference between the two is that the former will automatically escape HTML characters when rendering, while
  36  * the latter will not.
  37  *
  38  * # Example
  39  *
  40  * This example creates a Label after its associated Text field, an arrangement that cannot currently
  41  * be achieved using the standard Field layout's labelAlign.
  42  *
  43  *     @example
  44  *     Ext.create('Ext.form.Panel', {
  45  *         title: 'Field with Label',
  46  *         width: 400,
  47  *         bodyPadding: 10,
  48  *         renderTo: Ext.getBody(),
  49  *         layout: {
  50  *             type: 'hbox',
  51  *             align: 'middle'
  52  *         },
  53  *         items: [{
  54  *             xtype: 'textfield',
  55  *             hideLabel: true,
  56  *             flex: 1
  57  *         }, {
  58  *             xtype: 'label',
  59  *             forId: 'myFieldId',
  60  *             text: 'My Awesome Field',
  61  *             margins: '0 0 0 10'
  62  *         }]
  63  *     });
  64  */
  65 Ext.define('Ext.form.Label', {
  66     extend:'Ext.Component',
  67     alias: 'widget.label',
  68     requires: ['Ext.util.Format'],
  69
  70 <span id='Ext-form-Label-cfg-text'>    /**
  71 </span>     * @cfg {String} [text='']
  72      * The plain text to display within the label. If you need to include HTML
  73      * tags within the label's innerHTML, use the {@link #html} config instead.
  74      */
  75 <span id='Ext-form-Label-cfg-forId'>    /**
  76 </span>     * @cfg {String} forId
  77      * The id of the input element to which this label will be bound via the standard HTML 'for'
  78      * attribute. If not specified, the attribute will not be added to the label. In most cases you will be
  79      * associating the label with a {@link Ext.form.field.Base} component, so you should make sure this matches
  80      * the {@link Ext.form.field.Base#inputId inputId} of that field.
  81      */
  82 <span id='Ext-form-Label-cfg-html'>    /**
  83 </span>     * @cfg {String} [html='']
  84      * An HTML fragment that will be used as the label's innerHTML.
  85      * Note that if {@link #text} is specified it will take precedence and this value will be ignored.
  86      */
  87
  88     maskOnDisable: false,
  89     getElConfig: function(){
  90         var me = this;
  91         return {
  92             tag: 'label',
  93             id: me.id,
  94             htmlFor: me.forId || '',
  95             html: me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '')
  96         };
  97     },
  98
  99 <span id='Ext-form-Label-method-setText'>    /**
 100 </span>     * Updates the label's innerHTML with the specified string.
 101      * @param {String} text The new label text
 102      * @param {Boolean} [encode=true] False to skip HTML-encoding the text when rendering it
 103      * to the label. This might be useful if you want to include tags in the label's innerHTML rather
 104      * than rendering them as string literals per the default logic.
 105      * @return {Ext.form.Label} this
 106      */
 107     setText : function(text, encode){
 108         var me = this;
 109
 110         encode = encode !== false;
 111         if(encode) {
 112             me.text = text;
 113             delete me.html;
 114         } else {
 115             me.html = text;
 116             delete me.text;
 117         }
 118
 119         if(me.rendered){
 120             me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text;
 121         }
 122         return this;
 123     }
 124 });
 125
 126 </pre>
 127 </body>
 128 </html>