Auto.html
8.44 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-layout-component-Auto'>/**
</span> * The class is the default component layout for {@link Ext.Component} when no explicit
* `{@link Ext.Component#componentLayout componentLayout}` is configured.
*
* This class uses template methods to perform the individual aspects of measurement,
* calculation and publication of results. The methods called depend on the component's
* {@link Ext.AbstractComponent#getSizeModel size model}.
*
* ## configured / calculated
*
* In either of these size models, the dimension of the outer element is of a known size.
* The size is found in the `ownerContext` (the {@link Ext.layout.ContextItem} for the owner
* component) as either "width" or "height". This value, if available, is passed to the
* `publishInnerWidth` or `publishInnerHeight` method, respectively.
*
* ## shrinkWrap
*
* When a dimension uses the `shrinkWrap` size model, that means the content is measured,
* then the outer (owner) size is calculated and published.
*
* For example, for a shrinkWrap width, the following sequence of calls are made:
*
* - `Ext.layout.component.Component#measureContentWidth`
* - `publishOwnerWidth`
* - `calculateOwnerWidthFromContentWidth`
* - `publishInnerWidth` (in the event of hitting a min/maxWidth constraint)
*
* ## natural
*
* When a dimension uses the `natural` size model, the measurement is made on the outer
* (owner) element. This size is then used to determine the content area in much the same
* way as if the outer element had a `configured` or `calculated` size model.
*
* - `Ext.layout.component.Component#measureOwnerWidth`
* - `publishInnerWidth`
*
* @protected
*/
Ext.define('Ext.layout.component.Auto', {
/* Begin Definitions */
alias: 'layout.autocomponent',
extend: 'Ext.layout.component.Component',
/* End Definitions */
type: 'autocomponent',
<span id='Ext-layout-component-Auto-cfg-setHeightInDom'> /**
</span> * @cfg {Boolean} [setHeightInDom=false]
* @protected
* When publishing height of an auto Component, it is usually not written to the DOM.
* Setting this to `true` overrides this behaviour.
*/
setHeightInDom: false,
<span id='Ext-layout-component-Auto-cfg-setWidthInDom'> /**
</span> * @cfg {Boolean} [setWidthInDom=false]
* @protected
* When publishing width of an auto Component, it is usually not written to the DOM.
* Setting this to `true` overrides this behaviour.
*/
setWidthInDom: false,
waitForOuterHeightInDom: false,
waitForOuterWidthInDom: false,
beginLayoutCycle: function(ownerContext, firstCycle){
var me = this,
lastWidthModel = me.lastWidthModel,
lastHeightModel = me.lastHeightModel,
owner = me.owner;
me.callParent(arguments);
if (lastWidthModel && lastWidthModel.fixed && ownerContext.widthModel.shrinkWrap) {
owner.el.setWidth(null);
}
if (lastHeightModel && lastHeightModel.fixed && ownerContext.heightModel.shrinkWrap) {
owner.el.setHeight(null);
}
},
calculate: function(ownerContext) {
var me = this,
measurement = me.measureAutoDimensions(ownerContext),
heightModel = ownerContext.heightModel,
widthModel = ownerContext.widthModel,
width, height;
// It is generally important to process widths before heights, since widths can
// often effect heights...
if (measurement.gotWidth) {
if (widthModel.shrinkWrap) {
me.publishOwnerWidth(ownerContext, measurement.contentWidth);
} else if (me.publishInnerWidth) {
me.publishInnerWidth(ownerContext, measurement.width);
}
} else if (!widthModel.auto && me.publishInnerWidth) {
width = me.waitForOuterWidthInDom ? ownerContext.getDomProp('width')
: ownerContext.getProp('width');
if (width === undefined) {
me.done = false;
} else {
me.publishInnerWidth(ownerContext, width);
}
}
if (measurement.gotHeight) {
if (heightModel.shrinkWrap) {
me.publishOwnerHeight(ownerContext, measurement.contentHeight);
} else if (me.publishInnerHeight) {
me.publishInnerHeight(ownerContext, measurement.height);
}
} else if (!heightModel.auto && me.publishInnerHeight) {
height = me.waitForOuterHeightInDom ? ownerContext.getDomProp('height')
: ownerContext.getProp('height');
if (height === undefined) {
me.done = false;
} else {
me.publishInnerHeight(ownerContext, height);
}
}
if (!measurement.gotAll) {
me.done = false;
}
},
calculateOwnerHeightFromContentHeight: function (ownerContext, contentHeight) {
return contentHeight + ownerContext.getFrameInfo().height;
},
calculateOwnerWidthFromContentWidth: function (ownerContext, contentWidth) {
return contentWidth + ownerContext.getFrameInfo().width;
},
publishOwnerHeight: function (ownerContext, contentHeight) {
var me = this,
owner = me.owner,
height = me.calculateOwnerHeightFromContentHeight(ownerContext, contentHeight),
constrainedHeight, dirty, heightModel;
if (isNaN(height)) {
me.done = false;
} else {
constrainedHeight = Ext.Number.constrain(height, owner.minHeight, owner.maxHeight);
if (constrainedHeight == height) {
dirty = me.setHeightInDom;
} else {
heightModel = me.sizeModels[
(constrainedHeight < height) ? 'constrainedMax' : 'constrainedMin'];
height = constrainedHeight;
if (ownerContext.heightModel.calculatedFromShrinkWrap) {
// Don't bother to invalidate since that will come soon... but we need
// to signal our ownerLayout that we need an invalidate to actually
// make good on the determined (constrained) size!
ownerContext.heightModel = heightModel;
} else {
ownerContext.invalidate({ heightModel: heightModel });
}
}
ownerContext.setHeight(height, dirty);
}
},
publishOwnerWidth: function (ownerContext, contentWidth) {
var me = this,
owner = me.owner,
width = me.calculateOwnerWidthFromContentWidth(ownerContext, contentWidth),
constrainedWidth, dirty, widthModel;
if (isNaN(width)) {
me.done = false;
} else {
constrainedWidth = Ext.Number.constrain(width, owner.minWidth, owner.maxWidth);
if (constrainedWidth == width) {
dirty = me.setWidthInDom;
} else {
widthModel = me.sizeModels[
(constrainedWidth < width) ? 'constrainedMax' : 'constrainedMin'];
width = constrainedWidth;
if (ownerContext.widthModel.calculatedFromShrinkWrap) {
// Don't bother to invalidate since that will come soon... but we need
// to signal our ownerLayout that we need an invalidate to actually
// make good on the determined (constrained) size!
ownerContext.widthModel = widthModel;
} else {
ownerContext.invalidate({ widthModel: widthModel });
}
}
ownerContext.setWidth(width, dirty);
}
}
});
</pre>
</body>
</html>