Clear Up
SharpKit Reference

Label Class

Produces a standalone <label /> element which can be inserted into a form and be associated with a field in that form using the forId property.

NOTE: in most cases it will be more appropriate to use the fieldLabel and associated config properties (Ext.form.Labelable.labelAlign, 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 field layout.

You will likely be associating the label with a field component that extends Ext.form.field.Base, so you should make sure the forId is set to the same value as the inputId of that field.

The label's text can be set using either the text or html configuration properties; the difference between the two is that the former will automatically escape HTML characters when rendering, while the latter will not.


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',
            margin: '0 0 0 10'

Namespace: Ext.form



Name Description
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 Ext.form.field.Base component, so you should make sure this matches the inputId of that field.
text The plain text to display within the label. If you need to include HTML tags within the label's innerHTML, use the html config instead. Defaults to: ""


Name Description
setText(JsString, object) Updates the label's innerHTML with the specified string.
© Copyright 2005-2011 SharpKit. All rights reserved.