Label.js
4.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/**
* @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',
* margin: '0 0 0 10'
* }]
* });
*/
Ext.define('Ext.form.Label', {
extend:'Ext.Component',
alias: 'widget.label',
requires: ['Ext.util.Format'],
autoEl: 'label',
/**
* @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. 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.
* Note that if {@link #text} is specified it will take precedence and this value will be ignored.
*/
maskOnDisable: false,
getElConfig: function(){
var me = this;
me.html = me.text ? Ext.util.Format.htmlEncode(me.text) : (me.html || '');
return Ext.apply(me.callParent(), {
htmlFor: me.forId || ''
});
},
/**
* Updates the label's innerHTML with the specified string.
* @param {String} text The new label text
* @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;
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;
me.updateLayout();
}
return me;
}
});