Fit.html
15.4 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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!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-container-Fit'>/**
</span> * This is a base class for layouts that contain a single item that automatically expands to fill the layout's
* container. This class is intended to be extended or created via the layout:'fit'
* {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.
*
* Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using
* Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it.
*
* @example
* Ext.create('Ext.panel.Panel', {
* title: 'Fit Layout',
* width: 300,
* height: 150,
* layout:'fit',
* items: {
* title: 'Inner Panel',
* html: 'This is the inner panel content',
* bodyPadding: 20,
* border: false
* },
* renderTo: Ext.getBody()
* });
*
* If the container has multiple items, all of the items will all be equally sized. This is usually not
* desired, so to avoid this, place only a **single** item in the container. This sizing of all items
* can be used to provide a background {@link Ext.Img image} that is "behind" another item
* such as a {@link Ext.view.View dataview} if you also absolutely position the items.
*/
Ext.define('Ext.layout.container.Fit', {
/* Begin Definitions */
extend: 'Ext.layout.container.Container',
alternateClassName: 'Ext.layout.FitLayout',
alias: 'layout.fit',
/* End Definitions */
itemCls: Ext.baseCSSPrefix + 'fit-item',
targetCls: Ext.baseCSSPrefix + 'layout-fit',
type: 'fit',
<span id='Ext-layout-container-Fit-cfg-defaultMargins'> /**
</span> * @cfg {Object} defaultMargins
* If the individual contained items do not have a margins property specified or margin specified via CSS, the
* default margins from this property will be applied to each item.
*
* This property may be specified as an object containing margins to apply in the format:
*
* {
* top: (top margin),
* right: (right margin),
* bottom: (bottom margin),
* left: (left margin)
* }
*
* This property may also be specified as a string containing space-separated, numeric margin values. The order of
* the sides associated with each value matches the way CSS processes margin values:
*
* - If there is only one value, it applies to all sides.
* - If there are two values, the top and bottom borders are set to the first value and the right and left are
* set to the second.
* - If there are three values, the top is set to the first value, the left and right are set to the second,
* and the bottom is set to the third.
* - If there are four values, they apply to the top, right, bottom, and left, respectively.
*
*/
defaultMargins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
manageMargins: true,
sizePolicies: {
0: { setsWidth: 0, setsHeight: 0 },
1: { setsWidth: 1, setsHeight: 0 },
2: { setsWidth: 0, setsHeight: 1 },
3: { setsWidth: 1, setsHeight: 1 }
},
getItemSizePolicy: function (item, ownerSizeModel) {
// this layout's sizePolicy is derived from its owner's sizeModel:
var sizeModel = ownerSizeModel || this.owner.getSizeModel(),
mode = (sizeModel.width.shrinkWrap ? 0 : 1) |
(sizeModel.height.shrinkWrap ? 0 : 2);
return this.sizePolicies[mode];
},
beginLayoutCycle: function (ownerContext, firstCycle) {
var me = this,
// determine these before the lastSizeModels get updated:
resetHeight = me.lastHeightModel && me.lastHeightModel.calculated,
resetWidth = me.lastWidthModel && me.lastWidthModel.calculated,
resetSizes = resetWidth || resetHeight,
maxChildMinHeight = 0, maxChildMinWidth = 0,
c, childItems, i, item, length, margins, minHeight, minWidth, style, undef;
me.callParent(arguments);
// Clear any dimensions which we set before calculation, in case the current
// settings affect the available size. This particularly effects self-sizing
// containers such as fields, in which the target element is naturally sized,
// and should not be stretched by a sized child item.
if (resetSizes && ownerContext.targetContext.el.dom.tagName.toUpperCase() != 'TD') {
resetSizes = resetWidth = resetHeight = false;
}
childItems = ownerContext.childItems;
length = childItems.length;
for (i = 0; i < length; ++i) {
item = childItems[i];
// On the firstCycle, we determine the max of the minWidth/Height of the items
// since these can cause the container to grow scrollbars despite our attempts
// to fit the child to the container.
if (firstCycle) {
c = item.target;
minHeight = c.minHeight;
minWidth = c.minWidth;
if (minWidth || minHeight) {
margins = item.marginInfo || item.getMarginInfo();
// if the child item has undefined minWidth/Height, these will become
// NaN by adding the margins...
minHeight += margins.height;
minWidth += margins.height;
// if the child item has undefined minWidth/Height, these comparisons
// will evaluate to false... that is, "0 < NaN" == false...
if (maxChildMinHeight < minHeight) {
maxChildMinHeight = minHeight;
}
if (maxChildMinWidth < minWidth) {
maxChildMinWidth = minWidth;
}
}
}
if (resetSizes) {
style = item.el.dom.style;
if (resetHeight) {
style.height = '';
}
if (resetWidth) {
style.width = '';
}
}
}
if (firstCycle) {
ownerContext.maxChildMinHeight = maxChildMinHeight;
ownerContext.maxChildMinWidth = maxChildMinWidth;
}
// Cache the overflowX/Y flags, but make them false in shrinkWrap mode (since we
// won't be triggering overflow in that case) and false if we have no minSize (so
// no child to trigger an overflow).
c = ownerContext.target;
ownerContext.overflowX = (!ownerContext.widthModel.shrinkWrap &&
ownerContext.maxChildMinWidth &&
(c.autoScroll || c.overflowX)) || undef;
ownerContext.overflowY = (!ownerContext.heightModel.shrinkWrap &&
ownerContext.maxChildMinHeight &&
(c.autoScroll || c.overflowY)) || undef;
},
calculate : function (ownerContext) {
var me = this,
childItems = ownerContext.childItems,
length = childItems.length,
containerSize = me.getContainerSize(ownerContext),
info = {
length: length,
ownerContext: ownerContext,
targetSize: containerSize
},
shrinkWrapWidth = ownerContext.widthModel.shrinkWrap,
shrinkWrapHeight = ownerContext.heightModel.shrinkWrap,
overflowX = ownerContext.overflowX,
overflowY = ownerContext.overflowY,
scrollbars, scrollbarSize, padding, i, contentWidth, contentHeight;
if (overflowX || overflowY) {
// If we have children that have minHeight/Width, we may be forced to overflow
// and gain scrollbars. If so, we want to remove their space from the other
// axis so that we fit things inside the scrollbars rather than under them.
scrollbars = me.getScrollbarsNeeded(
overflowX && containerSize.width, overflowY && containerSize.height,
ownerContext.maxChildMinWidth, ownerContext.maxChildMinHeight);
if (scrollbars) {
scrollbarSize = Ext.getScrollbarSize();
if (scrollbars & 1) { // if we need the hscrollbar, remove its height
containerSize.height -= scrollbarSize.height;
}
if (scrollbars & 2) { // if we need the vscrollbar, remove its width
containerSize.width -= scrollbarSize.width;
}
}
}
// Size the child items to the container (if non-shrinkWrap):
for (i = 0; i < length; ++i) {
info.index = i;
me.fitItem(childItems[i], info);
}
if (shrinkWrapHeight || shrinkWrapWidth) {
padding = ownerContext.targetContext.getPaddingInfo();
if (shrinkWrapWidth) {
if (overflowY && !containerSize.gotHeight) {
// if we might overflow vertically and don't have the container height,
// we don't know if we will need a vscrollbar or not, so we must wait
// for that height so that we can determine the contentWidth...
me.done = false;
} else {
contentWidth = info.contentWidth + padding.width;
// the scrollbar flag (if set) will indicate that an overflow exists on
// the horz(1) or vert(2) axis... if not set, then there could never be
// an overflow...
if (scrollbars & 2) { // if we need the vscrollbar, add its width
contentWidth += scrollbarSize.width;
}
if (!ownerContext.setContentWidth(contentWidth)) {
me.done = false;
}
}
}
if (shrinkWrapHeight) {
if (overflowX && !containerSize.gotWidth) {
// if we might overflow horizontally and don't have the container width,
// we don't know if we will need a hscrollbar or not, so we must wait
// for that width so that we can determine the contentHeight...
me.done = false;
} else {
contentHeight = info.contentHeight + padding.height;
// the scrollbar flag (if set) will indicate that an overflow exists on
// the horz(1) or vert(2) axis... if not set, then there could never be
// an overflow...
if (scrollbars & 1) { // if we need the hscrollbar, add its height
contentHeight += scrollbarSize.height;
}
if (!ownerContext.setContentHeight(contentHeight)) {
me.done = false;
}
}
}
}
},
fitItem: function (itemContext, info) {
var me = this;
if (itemContext.invalid) {
me.done = false;
return;
}
info.margins = itemContext.getMarginInfo();
info.needed = info.got = 0;
me.fitItemWidth(itemContext, info);
me.fitItemHeight(itemContext, info);
// If not all required dimensions have been satisfied, we're not done.
if (info.got != info.needed) {
me.done = false;
}
},
fitItemWidth: function (itemContext, info) {
var contentWidth, width;
// Attempt to set only dimensions that are being controlled, not shrinkWrap dimensions
if (info.ownerContext.widthModel.shrinkWrap) {
// contentWidth must include the margins to be consistent with setItemWidth
width = itemContext.getProp('width') + info.margins.width;
// because we add margins, width will be NaN or a number (not undefined)
contentWidth = info.contentWidth;
if (contentWidth === undefined) {
info.contentWidth = width;
} else {
info.contentWidth = Math.max(contentWidth, width);
}
} else if (itemContext.widthModel.calculated) {
++info.needed;
if (info.targetSize.gotWidth) {
++info.got;
this.setItemWidth(itemContext, info);
}
}
this.positionItemX(itemContext, info);
},
fitItemHeight: function (itemContext, info) {
var contentHeight, height;
if (info.ownerContext.heightModel.shrinkWrap) {
// contentHeight must include the margins to be consistent with setItemHeight
height = itemContext.getProp('height') + info.margins.height;
// because we add margins, height will be NaN or a number (not undefined)
contentHeight = info.contentHeight;
if (contentHeight === undefined) {
info.contentHeight = height;
} else {
info.contentHeight = Math.max(contentHeight, height);
}
} else if (itemContext.heightModel.calculated) {
++info.needed;
if (info.targetSize.gotHeight) {
++info.got;
this.setItemHeight(itemContext, info);
}
}
this.positionItemY(itemContext, info);
},
positionItemX: function (itemContext, info) {
var margins = info.margins;
// Adjust position to account for configured margins or if we have multiple items
// (all items should overlap):
if (info.index || margins.left) {
itemContext.setProp('x', margins.left);
}
if (margins.width) {
// Need the margins for shrink-wrapping but old IE sometimes collapses the left margin into the padding
itemContext.setProp('margin-right', margins.width);
}
},
positionItemY: function (itemContext, info) {
var margins = info.margins;
if (info.index || margins.top) {
itemContext.setProp('y', margins.top);
}
if (margins.height) {
// Need the margins for shrink-wrapping but old IE sometimes collapses the top margin into the padding
itemContext.setProp('margin-bottom', margins.height);
}
},
setItemHeight: function (itemContext, info) {
itemContext.setHeight(info.targetSize.height - info.margins.height);
},
setItemWidth: function (itemContext, info) {
itemContext.setWidth(info.targetSize.width - info.margins.width);
}
});
</pre>
</body>
</html>