X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6a7e4474cba9d8be4b2ec445e10f1691f7277c50..refs/heads/master:/docs/source/Label.html diff --git a/docs/source/Label.html b/docs/source/Label.html index bafe8cb8..242235d3 100644 --- a/docs/source/Label.html +++ b/docs/source/Label.html @@ -1,74 +1,128 @@ + - + The source code - - + + + + - -
/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/** - * @class Ext.form.Label - * @extends Ext.BoxComponent - * Basic Label field. - * @constructor - * Creates a new Label - * @param {Ext.Element/String/Object} config The configuration options. If an element is passed, it is set as the internal - * element and its id used as the component id. If a string is passed, it is assumed to be the id of an existing element - * and is used as the component id. Otherwise, it is assumed to be a standard config object and is applied to the component. - * @xtype label + +
/**
+ * @docauthor Jason Johnston <jason@sencha.com>
+ *
+ * Produces a standalone `<label />` 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.
+ * 
+ *     @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.form.Label = Ext.extend(Ext.BoxComponent, {
-    
/** - * @cfg {String} text The plain text to display within the label (defaults to ''). If you need to include HTML +Ext.define('Ext.form.Label', { + extend:'Ext.Component', + alias: 'widget.label', + requires: ['Ext.util.Format'], + + /** + * @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. */ -
/** - * @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. + /** + * @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. */ -
/** - * @cfg {String} html An HTML fragment that will be used as the label's innerHTML (defaults to ''). + /** + * @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. */ - - // private - onRender : function(ct, position){ - if(!this.el){ - this.el = document.createElement('label'); - this.el.id = this.getId(); - this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || ''); - if(this.forId){ - this.el.setAttribute('for', this.forId); - } - } - Ext.form.Label.superclass.onRender.call(this, ct, position); + + maskOnDisable: false, + getElConfig: function(){ + var me = this; + return { + tag: 'label', + id: me.id, + htmlFor: me.forId || '', + html: me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '') + }; }, -
/** - * Updates the label's innerHTML with the specified string. + /** + * 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(t, encode){ - var e = encode === false; - this[!e ? 'text' : 'html'] = t; - delete this[e ? 'text' : 'html']; - if(this.rendered){ - this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t; + setText : function(text, encode){ + var me = this; + + encode = encode !== false; + if(encode) { + me.text = text; + delete me.html; + } else { + me.html = text; + delete me.text; + } + + if(me.rendered){ + me.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(text) : text; } return this; } }); -Ext.reg('label', Ext.form.Label);
+
- \ No newline at end of file +