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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<html>
<head>
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">Ext.ns("Ext.ux");
<div id="cls-Ext.ux.FieldLabeler"></div>/**
* @class Ext.ux.FieldLabeler
* <p>A plugin for Field Components which renders standard Ext form wrapping and labels
* round the Field at render time regardless of the layout of the Container.</p>
* <p>Usage:</p>
* <pre><code>
{
xtype: 'combo',
plugins: [ Ext.ux.FieldLabeler ],
triggerAction: 'all',
fieldLabel: 'Select type',
store: typeStore
}
* </code></pre>
*/
Ext.ux.FieldLabeler = (function(){
// Pulls a named property down from the first ancestor Container it's found in
function getParentProperty(propName) {
for (var p = this.ownerCt; p; p = p.ownerCt) {
if (p[propName]) {
return p[propName];
}
}
}
return {
// Add behaviour at important points in the Field's lifecycle.
init: function(f) {
f.onRender = f.onRender.createSequence(this.onRender);
f.onResize = f.onResize.createSequence(this.onResize);
f.onDestroy = f.onDestroy.createSequence(this.onDestroy);
},
onRender: function() {
// Do nothing if being rendered by a form layout
if (this.ownerCt) {
if (this.ownerCt.layout instanceof Ext.layout.FormLayout) {
return;
}
if (this.nextSibling()) {
this.margins = '0 0 5 0';
}
}
this.resizeEl = this.el.wrap({
cls: 'x-form-element'
});
this.positionEl = this.itemCt = this.resizeEl.wrap({
cls: 'x-form-item '
});
this.actionMode = 'itemCt';
// If we are hiding labels, then we're done!
if (!Ext.isDefined(this.hideLabels)) {
this.hideLabels = getParentProperty.call(this, "hideLabels");
}
if (this.hideLabels) {
this.resizeEl.setStyle('padding-left', '0px');
return;
}
// Collect info we need to render the label.
if (!Ext.isDefined(this.labelSeparator)) {
this.labelSeparator = getParentProperty.call(this, "labelSeparator");
}
if (!Ext.isDefined(this.labelPad)) {
this.labelPad = getParentProperty.call(this, "labelPad");
}
if (!Ext.isDefined(this.labelAlign)) {
this.labelAlign = getParentProperty.call(this, "labelAlign") || 'left';
}
this.itemCt.addClass('x-form-label-' + this.labelAlign);
if(this.labelAlign == 'top'){
if (!this.labelWidth) {
this.labelWidth = 'auto';
}
this.resizeEl.setStyle('padding-left', '0px');
} else {
if (!Ext.isDefined(this.labelWidth)) {
this.labelWidth = getParentProperty.call(this, "labelWidth") || 100;
}
this.resizeEl.setStyle('padding-left', (this.labelWidth + (this.labelPad || 5)) + 'px');
this.labelWidth += 'px';
}
this.label = this.itemCt.insertFirst({
tag: 'label',
cls: 'x-form-item-label',
style: {
width: this.labelWidth
},
html: this.fieldLabel + (this.labelSeparator || ':')
});
},
// private
// Ensure the input field is sized to fit in the content area of the resizeEl (to the right of its padding-left)
onResize: function() {
this.el.setWidth(this.resizeEl.getWidth(true));
if (this.el.dom.tagName.toLowerCase() == 'textarea') {
var h = this.resizeEl.getHeight(true);
if (!this.hideLabels && (this.labelAlign == 'top')) {
h -= this.label.getHeight();
}
this.el.setHeight(h);
}
},
// private
// Ensure that we clean up on destroy.
onDestroy: function() {
this.itemCt.remove();
}
};
})();</pre>
</body>
</html>
|
