/** * This ComponentLayout handles docking for Panels. It takes care of panels that are * part of a ContainerLayout that sets this Panel's size and Panels that are part of * an AutoContainerLayout in which this panel get his height based of the CSS or * its content. * @private */Ext.define('Ext.layout.component.Dock', { /* Begin Definitions */ extend: 'Ext.layout.component.Component', alias: 'layout.dock', alternateClassName: 'Ext.layout.component.AbstractDock', /* End Definitions */ type: 'dock', horzAxisProps: { name: 'horz', oppositeName: 'vert', dockBegin: 'left', dockEnd: 'right', horizontal: true, marginBegin: 'margin-left', maxSize: 'maxWidth', minSize: 'minWidth', pos: 'x', setSize: 'setWidth', shrinkWrapDock: 'shrinkWrapDockWidth', size: 'width', sizeModel: 'widthModel' }, vertAxisProps: { name: 'vert', oppositeName: 'horz', dockBegin: 'top', dockEnd: 'bottom', horizontal: false, marginBegin: 'margin-top', maxSize: 'maxHeight', minSize: 'minHeight', pos: 'y', setSize: 'setHeight', shrinkWrapDock: 'shrinkWrapDockHeight', size: 'height', sizeModel: 'heightModel' }, initializedBorders: -1, horizontalCollapsePolicy: { width: true, x: true }, verticalCollapsePolicy: { height: true, y: true }, finishRender: function () { var me = this, target, items; me.callParent(); target = me.getRenderTarget(); items = me.getDockedItems(); me.finishRenderItems(target, items); }, isItemBoxParent: function (itemContext) { return true; }, isItemShrinkWrap: function (item) { return true; }, noBorderClasses: [ Ext.baseCSSPrefix + 'docked-noborder-top', Ext.baseCSSPrefix + 'docked-noborder-right', Ext.baseCSSPrefix + 'docked-noborder-bottom', Ext.baseCSSPrefix + 'docked-noborder-left' ], noBorderClassesSides: { top: Ext.baseCSSPrefix + 'docked-noborder-top', right: Ext.baseCSSPrefix + 'docked-noborder-right', bottom: Ext.baseCSSPrefix + 'docked-noborder-bottom', left: Ext.baseCSSPrefix + 'docked-noborder-left' }, borderWidthProps: { top: 'border-top-width', right: 'border-right-width', bottom: 'border-bottom-width', left: 'border-left-width' }, _itemCls: Ext.baseCSSPrefix + 'docked', handleItemBorders: function() { var me = this, owner = me.owner, borders, docked, lastItems = me.lastDockedItems, oldBorders = me.borders, currentGeneration = owner.dockedItems.generation, noBorderClassesSides = me.noBorderClassesSides, borderWidthProps = me.borderWidthProps, i, ln, item, dock, side, collapsed = me.collapsed; if (me.initializedBorders === currentGeneration || (owner.border && !owner.manageBodyBorders) || (owner.collapsed && owner.collapseMode === 'mini')) { return; } me.initializedBorders = currentGeneration; // Borders have to be calculated using expanded docked item collection. me.collapsed = false; me.lastDockedItems = docked = me.getLayoutItems(); me.collapsed = collapsed; borders = { top: [], right: [], bottom: [], left: [] }; for (i = 0, ln = docked.length; i < ln; i++) { item = docked[i]; dock = item.dock; if (item.ignoreBorderManagement) { continue; } if (!borders[dock].satisfied) { borders[dock].push(item); borders[dock].satisfied = true; } if (!borders.top.satisfied && dock !== 'bottom') { borders.top.push(item); } if (!borders.right.satisfied && dock !== 'left') { borders.right.push(item); } if (!borders.bottom.satisfied && dock !== 'top') { borders.bottom.push(item); } if (!borders.left.satisfied && dock !== 'right') { borders.left.push(item); } } if (lastItems) { for (i = 0, ln = lastItems.length; i < ln; i++) { item = lastItems[i]; if (!item.destroyed && !item.ignoreBorderManagement && !owner.manageBodyBorders) { item.removeCls(me.noBorderClasses); } } } if (oldBorders) { for (side in oldBorders) { if (owner.manageBodyBorders && oldBorders[side].satisfied) { owner.setBodyStyle(borderWidthProps[side], ''); } } } for (side in borders) { ln = borders[side].length; if (!owner.manageBodyBorders) { for (i = 0; i < ln; i++) { borders[side][i].addCls(noBorderClassesSides[side]); } if ((!borders[side].satisfied && !owner.bodyBorder) || owner.bodyBorder === false) { owner.addBodyCls(noBorderClassesSides[side]); } else { owner.removeBodyCls(noBorderClassesSides[side]); } } else if (borders[side].satisfied) { owner.setBodyStyle(borderWidthProps[side], '1px'); } } me.borders = borders; }, beforeLayoutCycle: function (ownerContext) { var me = this, owner = me.owner, shrinkWrap = me.sizeModels.shrinkWrap, shrinkWrapDock = owner.shrinkWrapDock, collapsedHorz, collapsedVert; if (owner.collapsed) { if (owner.collapsedVertical()) { collapsedVert = true; ownerContext.measureDimensions = 1; } else { collapsedHorz = true; ownerContext.measureDimensions = 2; } } ownerContext.collapsedVert = collapsedVert; ownerContext.collapsedHorz = collapsedHorz; // If we are collapsed, we want to auto-layout using the placeholder/expander // instead of the normal items/dockedItems. This must be done here since we could // be in a box layout w/stretchmax which sets the width/heightModel to allow it to // control the size. if (collapsedVert) { ownerContext.heightModel = shrinkWrap; } else if (collapsedHorz) { ownerContext.widthModel = shrinkWrap; } shrinkWrapDock = shrinkWrapDock === true ? 3 : (shrinkWrapDock || 0); ownerContext.shrinkWrapDockHeight = (shrinkWrapDock & 1) && // jshint ignore:line ownerContext.heightModel.shrinkWrap; ownerContext.shrinkWrapDockWidth = (shrinkWrapDock & 2) && // jshint ignore:line ownerContext.widthModel.shrinkWrap; }, beginLayout: function(ownerContext) { var me = this, owner = me.owner, docked = me.getLayoutItems(), layoutContext = ownerContext.context, dockedItemCount = docked.length, lastCollapsedState = me.lastCollapsedState, dockedItems, i, item, itemContext, offsets, collapsed, dock; me.callParent(arguments); // Cache the children as ContextItems (like a Container). Also setup to handle // collapsed state: collapsed = owner.getCollapsed(); if (collapsed !== lastCollapsedState && lastCollapsedState !== undefined) { // If we are collapsing... if (me.owner.collapsed) { ownerContext.isCollapsingOrExpanding = 1; // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout. owner.addClsWithUI(owner.collapsedCls); } else { ownerContext.isCollapsingOrExpanding = 2; // Remove the collapsed class now, before layout calculations are done. owner.removeClsWithUI(owner.collapsedCls); ownerContext.lastCollapsedState = me.lastCollapsedState; } } me.lastCollapsedState = collapsed; ownerContext.dockedItems = dockedItems = []; for (i = 0; i < dockedItemCount; i++) { item = docked[i]; if (item.rendered) { dock = item.dock; itemContext = layoutContext.getCmp(item); itemContext.dockedAt = { x: 0, y: 0 }; itemContext.offsets = offsets = Ext.Element.parseBox(item.offsets || 0); itemContext.horizontal = dock === 'top' || dock === 'bottom'; offsets.width = offsets.left + offsets.right; offsets.height = offsets.top + offsets.bottom; dockedItems.push(itemContext); } } ownerContext.bodyContext = ownerContext.getEl('body'); }, beginLayoutCycle: function(ownerContext) { var me = this, docked = ownerContext.dockedItems, len = docked.length, owner = me.owner, frameBody = owner.frameBody, lastHeightModel = me.lastHeightModel, i, item, dock; me.callParent(arguments); if (me.owner.manageHeight) { // Reset in case manageHeight gets turned on during lifecycle. // See below for why display could be set to non-default value. if (me.lastBodyDisplay) { owner.body.dom.style.display = me.lastBodyDisplay = ''; } } else { // When manageHeight is false, the body stretches the outer el by using wide margins to force it to // accommodate the docked items. When overflow is visible (when panel is resizable and has embedded handles), // the body must be inline-block so as not to collapse its margins if (me.lastBodyDisplay !== 'inline-block') { owner.body.dom.style.display = me.lastBodyDisplay = 'inline-block'; } if (lastHeightModel && lastHeightModel.shrinkWrap && !ownerContext.heightModel.shrinkWrap) { owner.body.dom.style.marginBottom = ''; } } if (ownerContext.widthModel.auto) { if (ownerContext.widthModel.shrinkWrap) { owner.el.setWidth(null); } owner.body.setWidth(null); if (frameBody) { frameBody.setWidth(null); } } if (ownerContext.heightModel.auto) { owner.body.setHeight(null); //owner.el.setHeight(null); Disable this for now if (frameBody) { frameBody.setHeight(null); } } // Each time we begin (2nd+ would be due to invalidate) we need to publish the // known contentWidth/Height if we are collapsed: if (ownerContext.collapsedVert) { ownerContext.setContentHeight(0); } else if (ownerContext.collapsedHorz) { ownerContext.setContentWidth(0); } // dock: 'right' items, when a panel gets narrower get "squished". Moving them to // left:0px avoids this! for (i = 0; i < len; i++) { item = docked[i].target; dock = item.dock; if (dock === 'right') { item.setLocalX(0); } else if (dock !== 'left') { continue; } // TODO - clear width/height? } }, calculate: function (ownerContext) { var me = this, measure = me.measureAutoDimensions(ownerContext, ownerContext.measureDimensions), state = ownerContext.state, horzDone = state.horzDone, vertDone = state.vertDone, bodyContext = ownerContext.bodyContext, framing, horz, vert, forward, backward; // make sure we can use these value w/o calling methods to get them ownerContext.borderInfo || ownerContext.getBorderInfo(); // jshint ignore:line ownerContext.paddingInfo || ownerContext.getPaddingInfo(); // jshint ignore:line ownerContext.frameInfo || ownerContext.getFrameInfo(); // jshint ignore:line bodyContext.borderInfo || bodyContext.getBorderInfo(); // jshint ignore:line bodyContext.paddingInfo || bodyContext.getPaddingInfo(); // jshint ignore:line // On CSS3 browsers, the border and padding frame the outer el. On non-CSS3 // browsers, the outer el has no border or padding - all that appears on the // framing elements as padding and height. In CSS3, the border size effects the // origin of the dockedItems but the padding does not (so that must be added in // most of the time). In non-CSS3 mode, the dockedItems are outside the framing: // // ... top / left dockedItems ... // <div id="...-ml" style="padding-left: border-radius-left;"> // <div id="...-mr" style="padding-right: border-radius-right;"> // <div id="...-mc" style="padding: extra;"> // ... body ... // </div> // </div> // </div> // ... bottom / right dockedItems ... // // For the sake of sanity, we perform all the calculations in CSS3 mode. We test // for the presence of non-CSS3 framing only when necessary. // if (!ownerContext.frameBorder) { if (!(framing = ownerContext.framing)) { ownerContext.frameBorder = ownerContext.borderInfo; ownerContext.framePadding = ownerContext.paddingInfo; } else { // These values match what they would have been in CSS3. ownerContext.frameBorder = framing.border; ownerContext.framePadding = framing.padding; } } // Start the axes so they are ready to proceed inwards (fixed-size) or outwards // (shrinkWrap) and stash key property names as well: horz = !horzDone && me.createAxis(ownerContext, measure.contentWidth, ownerContext.widthModel, me.horzAxisProps, ownerContext.collapsedHorz); vert = !vertDone && me.createAxis(ownerContext, measure.contentHeight, ownerContext.heightModel, me.vertAxisProps, ownerContext.collapsedVert); // We iterate forward and backward over the dockedItems at the same time based on // whether an axis is shrinkWrap or fixed-size. For a fixed-size axis, the outer box // axis is allocated to docked items in forward order and is reduced accordingly. // To handle a shrinkWrap axis, the box starts at the inner (body) size and is used to // size docked items in backwards order. This is because the last docked item shares // an edge with the body. The item size is used to adjust the shrinkWrap axis outwards // until the first docked item (at the outermost edge) is processed. This backwards // order ensures that docked items never get an incorrect size for any dimension. for (forward = 0, backward = ownerContext.dockedItems.length; backward--; ++forward) { if (horz) { me.dockChild(ownerContext, horz, backward, forward); } if (vert) { me.dockChild(ownerContext, vert, backward, forward); } } if (horz && me.finishAxis(ownerContext, horz)) { state.horzDone = horzDone = horz; } if (vert && me.finishAxis(ownerContext, vert)) { state.vertDone = vertDone = vert; } // Once all items are docked, the final size of the outer panel or inner body can // be determined. If we can determine both width and height, we are done. if (horzDone && vertDone && me.finishConstraints(ownerContext, horzDone, vertDone)) { // Size information is published as we dock items but position is hard to do // that way (while avoiding published multiple times) so we publish all the // positions at the end. me.finishPositions(ownerContext, horzDone, vertDone); } else { me.done = false; } }, /** * Creates an axis object given the particulars. The process starts by placing the * dockedItems in an idealized box where this method is called once for each side. * The ideal box is defined by the CSS3 border and padding values (which account for * the influence of border-radius). The origin (the (0,0) point) of the ideal box is * the top-left edge of the border or the border-box. Normal dockedItems are placed * inside this box at an offset to clear the border and padding and sit properly in * the panel next to the body. * * The origin has to be started differently if the axis is in shrinkWrap mode. When * shrink-wrapping an axis, the axis starts at the edge of the body and expands * outwards as items are docked. This means the ideal (0,0) for shrinkWrap is on the * top-left corner of the body. * * The following diagram illustrates this using the vertical axis. * * +---------------------------+ 10px (border) * | | * | xxxxxxxxxxxxxxxxxxxxxxx | 5px (padding) shrinkWrap other * | +=====================+ | -50 15 * | | Header | | 30px * | | | | * | +=====================+ | * | +---------------------+ | -20 45 * | | tbar | | 20 px * | +---------------------+ | * | +---------------------+ | 0 65 * | | Body | | 100px * | | | | * | | | | * | +---------------------+ | * | +---------------------+ | 100 165 * | | bbar | | 15px * | +---------------------+ | * | xxxxxxxxxxxxxxxxxxxxxxx | 5px * | | * +---------------------------+ 10px * * These are sufficient to determine sizes of things, but to finalize this process * and assign proper positions, the tentative coordinates have to be adjusted by an * amount appropriate for the item. Because dockedItems are position:absolute, they * sit inside the border and so must be adjusted for padding. The body is different * because it is position:relative and so it naturally sits inside the padding and * the padding must not be included in its position. * * Headers and footers that use `ignoreParentFrame` interact with this process by * moving themselves outside the border and padding. So in the above diagram, the * Header would move up by 15px and *everything else* would move up by 10px. When * shrinkWrap is taking place, the 10px of border on the top is removed from the * height as well. * * The bbar behaves slightly different when it is `ignoreParentFrame`. In shrinkWrap * mode, it alone would move down by the padding and the bottom border would not be * included in the height. Otherwise, the bbar would be moved down 15px (since the * edge is fixed) and the next dockedItem would be placed at, or the body would be * stretched down to, 5px (padding) pixels above the bbar. * * @private */ createAxis: function (ownerContext, contentSize, sizeModel, axisProps, collapsedAxis) { var me = this, begin = 0, owner = me.owner, maxSize = owner[axisProps.maxSize], minSize = owner[axisProps.minSize] || 0, dockBegin = axisProps.dockBegin, dockEnd = axisProps.dockEnd, posProp = axisProps.pos, sizeProp = axisProps.size, hasMaxSize = maxSize != null, // exactly the same as "maxSize !== null && maxSize !== undefined" shrinkWrap = sizeModel.shrinkWrap, bodyContext, framing, padding, end; if (shrinkWrap) { // End position before adding docks around the content is content size plus the body borders in this axis. // If collapsed in this axis, the body borders will not be shown. if (collapsedAxis) { end = 0; } else { bodyContext = ownerContext.bodyContext; end = contentSize + bodyContext.borderInfo[sizeProp]; } } else { framing = ownerContext.frameBorder; padding = ownerContext.framePadding; begin = framing[dockBegin] + padding[dockBegin]; end = ownerContext.getProp(sizeProp) - (framing[dockEnd] + padding[dockEnd]); } return { shrinkWrap: sizeModel.shrinkWrap, sizeModel: sizeModel, // An axis tracks start and end+1 px positions. eg 0 to 10 for 10px high initialBegin: begin, begin: begin, end: end, collapsed: collapsedAxis, horizontal: axisProps.horizontal, ignoreFrameBegin: null, ignoreFrameEnd: null, initialSize: end - begin, maxChildSize: 0, hasMinMaxConstraints: (minSize || hasMaxSize) && sizeModel.shrinkWrap, minSize: minSize, maxSize: hasMaxSize ? maxSize : 1e9, bodyPosProp: me.owner.manageHeight ? posProp : axisProps.marginBegin, dockBegin: dockBegin, // 'left' or 'top' dockEnd: dockEnd, // 'right' or 'end' posProp: posProp, // 'x' or 'y' sizeProp: sizeProp, // 'width' or 'height' setSize: axisProps.setSize, shrinkWrapDock: ownerContext[axisProps.shrinkWrapDock], sizeModelName: axisProps.sizeModel, dockedPixelsEnd: 0 }; }, /** * Docks a child item on the specified axis. This boils down to determining if the item * is docked at the "beginning" of the axis ("left" if horizontal, "top" if vertical), * the "end" of the axis ("right" if horizontal, "bottom" if vertical) or stretches * along the axis ("top" or "bottom" if horizontal, "left" or "right" if vertical). It * also has to differentiate between fixed and shrinkWrap sized dimensions. * @private */ dockChild: function (ownerContext, axis, backward, forward) { var me = this, itemContext = ownerContext.dockedItems[axis.shrinkWrap ? backward : forward], item = itemContext.target, dock = item.dock, // left/top/right/bottom sizeProp = axis.sizeProp, pos, size; if (item.ignoreParentFrame && ownerContext.isCollapsingOrExpanding) { // collapsed window header margins may differ from expanded window header margins // so we need to make sure the old cached values are not used in axis calculations itemContext.clearMarginCache(); } if (!itemContext.marginInfo) { itemContext.getMarginInfo(); // get marginInfo ready } if (dock === axis.dockBegin) { if (axis.shrinkWrap) { pos = me.dockOutwardBegin(ownerContext, itemContext, item, axis); } else { pos = me.dockInwardBegin(ownerContext, itemContext, item, axis); } } else if (dock === axis.dockEnd) { if (axis.shrinkWrap) { pos = me.dockOutwardEnd(ownerContext, itemContext, item, axis); } else { pos = me.dockInwardEnd(ownerContext, itemContext, item, axis); } } else { if (axis.shrinkWrapDock) { // we are still shrinkwrapping transversely... so we need to include the // size of this item in the max calculation size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp]; axis.maxChildSize = Math.max(axis.maxChildSize, size); pos = 0; } else { pos = me.dockStretch(ownerContext, itemContext, item, axis); } } itemContext.dockedAt[axis.posProp] = pos; }, /** * Docks an item on a fixed-size axis at the "beginning". The "beginning" of the horizontal * axis is "left" and the vertical is "top". For a fixed-size axis, the size works from * the outer element (the panel) towards the body. * @private */ dockInwardBegin: function (ownerContext, itemContext, item, axis) { var pos = axis.begin, sizeProp = axis.sizeProp, ignoreParentFrame = item.ignoreParentFrame, delta, size, dock; if (ignoreParentFrame) { axis.ignoreFrameBegin = itemContext; dock = item.dock; // We need to move everything up by the border-width. delta = ownerContext.frameBorder[dock]; // We need to move the header "up" by the padding as well. pos -= delta + ownerContext.framePadding[dock]; } if (!item.overlay) { size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp]; axis.begin += size; if (ignoreParentFrame) { axis.begin -= delta; } } return pos; }, /** * Docks an item on a fixed-size axis at the "end". The "end" of the horizontal axis is * "right" and the vertical is "bottom". * @private */ dockInwardEnd: function (ownerContext, itemContext, item, axis) { var sizeProp = axis.sizeProp, size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp], pos = axis.end - size, frameEnd; if (!item.overlay) { axis.end = pos; } if (item.ignoreParentFrame) { axis.ignoreFrameEnd = itemContext; frameEnd = ownerContext.frameBorder[item.dock]; pos += frameEnd + ownerContext.framePadding[item.dock]; axis.end += frameEnd; } return pos; }, /** * Docks an item on a shrinkWrap axis at the "beginning". The "beginning" of the horizontal * axis is "left" and the vertical is "top". For a shrinkWrap axis, the size works from * the body outward to the outermost element (the panel). * * During the docking process, coordinates are allowed to be negative. We start with the * body at (0,0) so items docked "top" or "left" will simply be assigned negative x/y. In * the {@link #finishPositions} method these are corrected and framing is added. This way * the correction is applied as a simple translation of delta x/y on all coordinates to * bring the origin back to (0,0). * @private */ dockOutwardBegin: function (ownerContext, itemContext, item, axis) { var pos = axis.begin, sizeProp = axis.sizeProp, size; if (axis.collapsed) { axis.ignoreFrameBegin = axis.ignoreFrameEnd = itemContext; } else if (item.ignoreParentFrame) { axis.ignoreFrameBegin = itemContext; } // NOTE - When shrinkWrapping an ignoreParentFrame, this must be the last item // on the axis. Since that is so, we let finishAxis take this in to account. if (!item.overlay) { size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp]; pos -= size; axis.begin = pos; } return pos; }, /** * Docks an item on a shrinkWrap axis at the "end". The "end" of the horizontal axis is * "right" and the vertical is "bottom". * @private */ dockOutwardEnd: function (ownerContext, itemContext, item, axis) { var pos = axis.end, sizeProp = axis.sizeProp, size; size = itemContext.getProp(sizeProp) + itemContext.marginInfo[sizeProp]; if (axis.collapsed) { axis.ignoreFrameBegin = axis.ignoreFrameEnd = itemContext; } else if (item.ignoreParentFrame) { axis.ignoreFrameEnd = itemContext; } // NOTE - When shrinkWrapping an ignoreParentFrame, this must be the last item // on the axis. Since that is so, we let finishAxis take this in to account. if (!item.overlay) { axis.end = pos + size; axis.dockedPixelsEnd += size; } return pos; }, /** * Docks an item that might stretch across an axis. This is done for dock "top" and * "bottom" items on the horizontal axis and dock "left" and "right" on the vertical. * @private */ dockStretch: function (ownerContext, itemContext, item, axis) { var dock = item.dock, // left/top/right/bottom (also used to index padding/border) sizeProp = axis.sizeProp, // 'width' or 'height' horizontal = dock === 'top' || dock === 'bottom', border = ownerContext.frameBorder, offsets = itemContext.offsets, padding = ownerContext.framePadding, endProp = horizontal ? 'right' : 'bottom', startProp = horizontal ? 'left' : 'top', pos = axis.begin + offsets[startProp], margin, size; if (item.stretch !== false) { size = axis.end - pos - offsets[endProp]; if (item.ignoreParentFrame) { // In CSS3, the border and padding need to be ignored specifically. In // non-CSS3 / framing mode, the border and padding will be 0 **but** the // header is not rendered inside the framing elements and so we do not // want to do anything anyway! pos -= padding[startProp] + border[startProp]; size += padding[sizeProp] + border[sizeProp]; } margin = itemContext.marginInfo; size -= margin[sizeProp]; itemContext[axis.setSize](size); } return pos; }, /** * Finishes the calculation of an axis by determining its size. In non-shrink-wrap * cases, this is also where we set the body size. * @private */ finishAxis: function (ownerContext, axis) { // If the maxChildSize is NaN it means at some point we tried to determine // The size of a docked item but we couldn't, so just jump out straight // away before doing any other processing if (isNaN(axis.maxChildSize)) { return false; } var axisBegin = axis.begin, size = axis.end - axisBegin, collapsed = axis.collapsed, setSizeMethod = axis.setSize, beginName = axis.dockBegin, // left or top endName = axis.dockEnd, // right or bottom padding = ownerContext.framePadding, border = ownerContext.frameBorder, borderBegin = border[beginName], framing = ownerContext.framing, framingBegin = framing && framing[beginName], // The padding is in play unless the axis is collapsed. paddingBegin = collapsed ? 0 : padding[beginName], sizeProp = axis.sizeProp, ignoreFrameBegin = axis.ignoreFrameBegin, ignoreFrameEnd = axis.ignoreFrameEnd, bodyContext = ownerContext.bodyContext, extraPaddingBegin = Math.max(borderBegin + paddingBegin - framingBegin, 0), bodyPos, bodySize, delta, dirty; if (axis.shrinkWrap) { // Since items docked left/top on a shrinkWrap axis go into negative coordinates, // we apply a delta to all coordinates to adjust their relative origin back to // a (0,0) inside the border. bodySize = axis.initialSize; if (framing) { // In CSS3 mode, things are compartively simple because "framing" is just // borders and padding. In non-CSS3 mode, however, the framing elements // are given a size equal to the max of the border-width and border-radius // and this pushes the body down accordingly. Further, the dockedItems are // all rendered outside the framing elements, so their origin equals the // ideal box origin. To translate this to match CSS3, we have to add on // the border-top. delta = -axisBegin + borderBegin + paddingBegin; bodyPos = delta - framingBegin - extraPaddingBegin; } else { bodyPos = -axisBegin; delta = bodyPos + paddingBegin; } if (!collapsed) { size += padding[sizeProp]; } if (ignoreFrameBegin) { // When some component ignores the begin framing, we move everything "up" // by that amount of framing. We also do not include that amount of the // framing in the shrinkWrap size. delta -= borderBegin; bodyPos -= borderBegin; // The item ignoring the framing must also escape the padding. Since the // axis.delta includes the padding and we want to apply this to only the // one item, we just poke its dockedAt.x/y property so that when we add // axis.begin the padding will cancel out. (Note: when we are collapsed // paddingBegin will be 0). ignoreFrameBegin.dockedAt[axis.posProp] -= paddingBegin; } else { size += borderBegin; } if (collapsed) { // in this case "ignoreFrameBegin === ignoreFrameEnd" so we can take the // special cases out of the mix here... } // jshint ignore:line else if (ignoreFrameEnd) { // When a component ignores the end framing, we simply move it further // "down" by the end padding and we do not add the end framing to the // shrinkWrap size. ignoreFrameEnd.dockedAt[axis.posProp] += padding[endName]; } else { size += border[endName]; } axis.size = size; // we have to wait for min/maxWidth/Height processing if (!axis.horizontal && !this.owner.manageHeight) { // the height of the bodyEl will give the proper height to the outerEl so // we don't need to set heights in the DOM dirty = false; } } else { // For a fixed-size axis, we started at the outer box and already have the // proper origin... almost... except for the owner's border. if (framing) { // since dockedItems are rendered outside the framing, they have the // proper origin already: delta = 0; bodyPos = axisBegin - framingBegin - extraPaddingBegin; } else { delta = -borderBegin; bodyPos = axisBegin - paddingBegin - borderBegin; } // Body size is remaining space between ends of Axis. bodySize = size; } axis.delta = delta; bodyContext[setSizeMethod](bodySize, dirty); bodyContext.setProp(axis.bodyPosProp, bodyPos); return !isNaN(size); }, beforeInvalidateShrinkWrapDock: function(itemContext, options){ var sizeModelName = options.axis.sizeModelName; if (!itemContext[sizeModelName].constrainedMin) { // if the child hit a min constraint, it needs to be at its configured size, so // we leave the sizeModel alone itemContext[sizeModelName] = Ext.layout.SizeModel.calculated; } }, afterInvalidateShrinkWrapDock: function(itemContext, options){ var axis = options.axis, me = options.layout, pos; if (itemContext[axis.sizeModelName].calculated) { pos = me.dockStretch(options.ownerContext, itemContext, itemContext.target, axis); itemContext.setProp(axis.posProp, axis.delta + pos); } }, /** * Finishes processing of each axis by applying the min/max size constraints. * @private */ finishConstraints: function (ownerContext, horz, vert) { var me = this, sizeModels = me.sizeModels, publishWidth = horz.shrinkWrap, publishHeight = vert.shrinkWrap, owner = me.owner, dirty, height, width, heightModel, widthModel, size, minSize, maxSize, maxChildSize, desiredSize; // In these calculations, maxChildSize will only be > 0 in the scenario where // we are dock shrink wrapping in that direction, otherwise it is not measured. // As such, the additions are done to simplify the logic, even though in most // cases, it will have no impact on the overall result. if (publishWidth) { size = horz.size; minSize = horz.collapsed ? 0 : horz.minSize; maxSize = horz.maxSize; maxChildSize = horz.maxChildSize; desiredSize = Math.max(size, maxChildSize); if (desiredSize > maxSize) { widthModel = sizeModels.constrainedMax; width = maxSize; } else if (desiredSize < minSize) { widthModel = sizeModels.constrainedMin; width = minSize; } else if (size < maxChildSize) { widthModel = sizeModels.constrainedDock; owner.dockConstrainedWidth = width = maxChildSize; } else { width = size; } } if (publishHeight) { size = vert.size; minSize = vert.collapsed ? 0 : vert.minSize; maxSize = vert.maxSize; maxChildSize = vert.maxChildSize; // For vertical docks, their weighting means the height is affected by top/bottom // docked items, so we need to subtract them here desiredSize = Math.max(size, maxChildSize + size - vert.initialSize); if (desiredSize > maxSize) { heightModel = sizeModels.constrainedMax; height = maxSize; } else if (desiredSize < minSize) { heightModel = sizeModels.constrainedMin; height = minSize; } else if (size < maxChildSize) { heightModel = sizeModels.constrainedDock; owner.dockConstrainedHeight = height = maxChildSize; } else { if (!ownerContext.collapsedVert && !owner.manageHeight) { // height of the outerEl is provided by the height (including margins) // of the bodyEl, so this value does not need to be written to the DOM dirty = false; // so long as we set top and bottom margins on the bodyEl! ownerContext.bodyContext.setProp('margin-bottom', vert.dockedPixelsEnd); } height = size; } } // Handle the constraints... if (widthModel || heightModel) { // See ContextItem#init for an analysis of why this case is special. Basically, // in this case, we only know the width and the height could be anything. if (widthModel && heightModel && widthModel.constrainedMax && heightModel.constrainedByMin) { ownerContext.invalidate({ widthModel: widthModel }); return false; } // To process a width or height other than that to which we have shrinkWrapped, // we need to invalidate our component and carry forward w/these constrains... // unless the ownerLayout wants these results and will invalidate us anyway. if (!ownerContext.widthModel.calculatedFromShrinkWrap && !ownerContext.heightModel.calculatedFromShrinkWrap) { // nope, just us to handle the constraint... ownerContext.invalidate({ widthModel: widthModel, heightModel: heightModel }); return false; } // We have a constraint to deal with, so we just adjust the size models and // allow the ownerLayout to invalidate us with its contribution to our final // size... } else { // We're not invalidating, the ownerContext, so if we're shrink wrapping we'll need to // tell any docked items to invalidate themselves if necessary.' me.invalidateAxes(ownerContext, horz, vert); } // we only publish the sizes if we are not invalidating the result... if (publishWidth) { ownerContext.setWidth(width); if (widthModel) { ownerContext.widthModel = widthModel; // important to the ownerLayout } } if (publishHeight) { ownerContext.setHeight(height, dirty); if (heightModel) { ownerContext.heightModel = heightModel; // important to the ownerLayout } } return true; }, /** * * The default weighting of docked items produces this arrangement: * * +--------------------------------------------+ * | Top 1 | * +--------------------------------------------+ * | Top 2 | * +-----+-----+--------------------+-----+-----+ * | | | | | | * | | | | | | * | | | | R | R | * | L | L | | I | I | * | E | E | | G | G | * | F | F | | H | H | * | T | T | | T | T | * | | | | | | * | 2 | 1 | | 1 | 2 | * | | | | | | * | | | | | | * +-----+-----+--------------------+-----+-----+ * | Bottom 1 | * +--------------------------------------------+ * | Bottom 2 | * +--------------------------------------------+ * * So when we are shrinkWrapDock on the horizontal, the stretch size for top/bottom * docked items is the final axis size. For the vertical axis, however, the stretch * */ invalidateAxes: function(ownerContext, horz, vert){ var before = this.beforeInvalidateShrinkWrapDock, after = this.afterInvalidateShrinkWrapDock, horzSize = horz.end - horz.begin, vertSize = vert.initialSize, invalidateHorz = horz.shrinkWrapDock && horz.maxChildSize <= horzSize, invalidateVert = vert.shrinkWrapDock && vert.maxChildSize <= vertSize, dockedItems, len, i, itemContext, itemSize, isHorz, axis, sizeProp; if (invalidateHorz || invalidateVert) { if (invalidateVert) { // For vertical, we need to reset the initial position because they are affected // by the horizontally docked items vert.begin = vert.initialBegin; vert.end = vert.begin + vert.initialSize; } dockedItems = ownerContext.dockedItems; for (i = 0, len = dockedItems.length; i < len; ++i) { itemContext = dockedItems[i]; isHorz = itemContext.horizontal; axis = null; if (invalidateHorz && isHorz) { sizeProp = horz.sizeProp; itemSize = horzSize; axis = horz; } else if (invalidateVert && !isHorz) { sizeProp = vert.sizeProp; itemSize = vertSize; axis = vert; } if (axis) { // subtract any margins itemSize -= itemContext.getMarginInfo()[sizeProp]; if (itemSize !== itemContext.props[sizeProp]) { itemContext.invalidate({ before: before, after: after, axis: axis, ownerContext: ownerContext, layout: this }); } } } } }, /** * Finishes the calculation by setting positions on the body and all of the items. * @private */ finishPositions: function (ownerContext, horz, vert) { var dockedItems = ownerContext.dockedItems, length = dockedItems.length, deltaX = horz.delta, deltaY = vert.delta, index, itemContext; for (index = 0; index < length; ++index) { itemContext = dockedItems[index]; itemContext.setProp('x', deltaX + itemContext.dockedAt.x); itemContext.setProp('y', deltaY + itemContext.dockedAt.y); } }, finishedLayout: function(ownerContext) { var me = this, target = ownerContext.target; me.callParent(arguments); if (!ownerContext.animatePolicy) { if (ownerContext.isCollapsingOrExpanding === 1) { target.afterCollapse(false); } else if (ownerContext.isCollapsingOrExpanding === 2) { target.afterExpand(false); } } }, getAnimatePolicy: function(ownerContext) { var me = this, lastCollapsedState, policy; if (ownerContext.isCollapsingOrExpanding === 1) { lastCollapsedState = me.lastCollapsedState; } else if (ownerContext.isCollapsingOrExpanding === 2) { lastCollapsedState = ownerContext.lastCollapsedState; } if (lastCollapsedState === 'left' || lastCollapsedState === 'right') { policy = me.horizontalCollapsePolicy; } else if (lastCollapsedState === 'top' || lastCollapsedState === 'bottom') { policy = me.verticalCollapsePolicy; } return policy; }, /** * Retrieve an ordered and/or filtered array of all docked Components. * @param {String} [order='render'] The desired ordering of the items ('render' or 'visual'). * @param {Boolean} [beforeBody] An optional flag to limit the set of items to only those * before the body (true) or after the body (false). All components are returned by * default. * @return {Ext.Component[]} An array of components. * @protected */ getDockedItems: function(order, beforeBody) { var me = this, renderedOnly = (order === 'visual'), all = renderedOnly ? Ext.ComponentQuery.query('[rendered]', me.owner.dockedItems.items) : me.owner.dockedItems.items, sort = all && all.length && order !== false, renderOrder, dock, dockedItems, i, isBefore, length; if (beforeBody == null) { dockedItems = sort && !renderedOnly ? all.slice() : all; } else { dockedItems = []; for (i = 0, length = all.length; i < length; ++i) { dock = all[i].dock; isBefore = (dock === 'top' || dock === 'left'); if (beforeBody ? isBefore : !isBefore) { dockedItems.push(all[i]); } } sort = sort && dockedItems.length; } if (sort) { renderOrder = (order = order || 'render') === 'render'; Ext.Array.sort(dockedItems, function(a, b) { var aw, bw; // If the two items are on opposite sides of the body, they must not be sorted by any weight value: // For rendering purposes, left/top *always* sorts before right/bottom if (renderOrder && ((aw = me.owner.dockOrder[a.dock]) !== (bw = me.owner.dockOrder[b.dock]))) { // The two dockOrder values cancel out when two items are on opposite sides. if (!(aw + bw)) { // jshint ignore:line return aw - bw; } } aw = me.getItemWeight(a, order); bw = me.getItemWeight(b, order); if ((aw !== undefined) && (bw !== undefined)) { return aw - bw; } return 0; }); } return dockedItems || []; }, getItemWeight: function (item, order) { var weight = item.weight || this.owner.defaultDockWeights[item.dock]; return weight[order] || weight; }, /** * @protected * Returns an array containing all the **visible** docked items inside this layout's owner Panel * @return {Array} An array containing all the **visible** docked items of the Panel */ getLayoutItems : function() { var me = this, items, itemCount, item, i, result; if (me.owner.collapsed) { result = me.owner.getCollapsedDockedItems(); } else { items = me.getDockedItems('visual'); itemCount = items.length; result = []; for (i = 0; i < itemCount; i++) { item = items[i]; if (!item.hidden) { result.push(item); } } } return result; }, // Content size includes padding but not borders, so subtract them off measureContentWidth: function (ownerContext) { var bodyContext = ownerContext.bodyContext; return bodyContext.el.getWidth() - bodyContext.getBorderInfo().width; }, measureContentHeight: function (ownerContext) { var bodyContext = ownerContext.bodyContext; return bodyContext.el.getHeight() - bodyContext.getBorderInfo().height; }, redoLayout: function(ownerContext) { var me = this, owner = me.owner; // If we are collapsing... if (ownerContext.isCollapsingOrExpanding === 1) { if (owner.reExpander) { owner.reExpander.el.show(); } // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout. owner.addClsWithUI(owner.collapsedCls); ownerContext.redo(true); } else if (ownerContext.isCollapsingOrExpanding === 2) { // Remove the collapsed class now, before layout calculations are done. owner.removeClsWithUI(owner.collapsedCls); ownerContext.bodyContext.redo(); } }, /** * @private * Used to render in the correct order, top/left before bottom/right */ renderChildren: function() { var me = this, items = me.getDockedItems(), target = me.getRenderTarget(); me.handleItemBorders(); me.renderItems(items, target); }, /** * Render the top and left docked items before any existing DOM nodes in our render * target and then render the right and bottom docked items after. This is important, * for such things as tab stops and ARIA readers, that the DOM nodes are in a * meaningful order. * * Our collection of docked items will already be ordered via Panel.getDockedItems(). * @protected */ renderItems: function (items, target) { var me = this, owner = me.owner, dockedItems = owner.dockedItems, dockedItemCount = items.length, bodyEl = owner.body, baseIndex, childNodes, childNodeCount, dom, gap, i, item, position; // TODO: This is affected if users provide custom weight values to their // docked items, which puts it out of (t,l,r,b) order. Avoiding a second // sort operation here, for now, in the name of performance. getDockedItems() // needs the sort operation not just for this layout-time rendering, but // also for getRefItems() to return a logical ordering (CQ, et al). if (dockedItemCount) { childNodes = me.getRenderTarget().dom.childNodes; childNodeCount = childNodes.length; dockedItems = dockedItems.map; // MixedCollection's map by id gap = 0; // Our childNodes will contain non-item elements as well as the bodyEl. We // want to find the bodyEl's index and count the number of dockedItems that // are already rendered before it. // for (i = 0; i < childNodeCount; ++i) { dom = childNodes[i]; if (dom === bodyEl.dom) { // We want top/left dockedItems to be inserted before the body, so // use the bodyEl's index as the base. baseIndex = i; break; } if (dockedItems[dom.id]) { ++gap; } } // Subtract the number of rendered dockedItems from the bodyEl's index to get // the actual base. // baseIndex -= gap; // Finally loop over the dockedItems again and ensure that the top/left and // bottom/right items are at the proper DOM offset, immediately surrounding // the bodyEl. // for (i = 0; i < dockedItemCount; ++i) { item = items[i]; position = baseIndex + i; if (item.dock === 'right' || item.dock === 'bottom') { ++position; // skip over the bodyEl } // Same logic as Layout.renderItems() if (!item.rendered) { me.renderItem(item, target, position); } else if (!me.isValidParent(item, target, position)) { me.moveItem(item, target, position); } } } }, undoLayout: function(ownerContext) { var me = this, owner = me.owner; // If we are collapsing... if (ownerContext.isCollapsingOrExpanding === 1) { // We do not want to see the re-expander header until the final collapse is complete if (owner.reExpander) { owner.reExpander.el.hide(); } // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken by the layout. owner.removeClsWithUI(owner.collapsedCls); ownerContext.undo(true); } else if (ownerContext.isCollapsingOrExpanding === 2) { // Remove the collapsed class now, before layout calculations are done. owner.addClsWithUI(owner.collapsedCls); ownerContext.bodyContext.undo(); } }, sizePolicy: { nostretch: { setsWidth: 0, setsHeight: 0 }, horz: { // item goes horizontally (top or bottom docked) shrinkWrap: { // This is how we manage the width of a top/bottom docked item when its // shrinkWrapWidth and ours need to be maxed (calculatedFromShrinkWrap) setsWidth: 1, setsHeight: 0, readsWidth: 1 }, stretch: { setsWidth: 1, setsHeight: 0 } }, vert: { // item goes vertically (left or right docked) shrinkWrap: { setsWidth: 0, setsHeight: 1, readsHeight: 1 }, stretch: { setsWidth: 0, setsHeight: 1 } }, stretchV: { setsWidth: 0, setsHeight: 1 }, // Circular dependency with partial auto-sized panels: // // If we have an autoHeight docked item being stretched horizontally (top/bottom), // that stretching will determine its width and its width must be set before its // autoHeight can be determined. If that item is docked in an autoWidth panel, the // body will need its height set before it can determine its width, but the height // of the docked item is needed to subtract from the panel height in order to set // the body height. // // This same pattern occurs with autoHeight panels with autoWidth docked items on // left or right. If the panel is fully auto or fully fixed, these problems don't // come up because there is no dependency between the dimensions. // // Cutting the Gordian Knot: In these cases, we have to allow something to measure // itself without full context. This is OK as long as the managed dimension doesn't // effect the auto-dimension, which is often the case for things like toolbars. The // managed dimension only effects overflow handlers and such and does not change the // auto-dimension. To encourage the item to measure itself without waiting for the // managed dimension, we have to tell it that the layout will also be reading that // dimension. This is similar to how stretchmax works. autoStretchH: { readsWidth: 1, setsWidth: 1, setsHeight: 0 }, autoStretchV: { readsHeight: 1, setsWidth: 0, setsHeight: 1 } }, getItemSizePolicy: function (item, ownerSizeModel) { var me = this, policy = me.sizePolicy, shrinkWrapDock = me.owner.shrinkWrapDock, dock, vertical; if (item.stretch === false) { return policy.nostretch; } dock = item.dock; vertical = (dock === 'left' || dock === 'right'); shrinkWrapDock = shrinkWrapDock === true ? 3 : (shrinkWrapDock || 0); if (vertical) { policy = policy.vert; shrinkWrapDock = shrinkWrapDock & 1; // jshint ignore:line } else { policy = policy.horz; shrinkWrapDock = shrinkWrapDock & 2; // jshint ignore:line } if (shrinkWrapDock) { // Getting the size model is expensive, so only do so if we really need it if (!ownerSizeModel) { ownerSizeModel = me.owner.getSizeModel(); } if (ownerSizeModel[vertical ? 'height' : 'width'].shrinkWrap) { return policy.shrinkWrap; } } return policy.stretch; }, /** * @protected * We are overriding the Ext.layout.Layout configureItem method to also add a class that * indicates the position of the docked item. We use the itemCls (x-docked) as a prefix. * An example of a class added to a dock: right item is x-docked-right * @param {Ext.Component} item The item we are configuring */ configureItem : function(item, pos) { this.callParent(arguments); item.addCls(this._itemCls); if (!item.ignoreBorderManagement) { item.addClsWithUI(this.getDockCls(item.dock)); } }, /** * Get's the css class name for a given dock position. * @param {String} dock `top`, `right`, `bottom`, or `left` * @return {String} * @private */ getDockCls: function(dock) { return 'docked-' + dock; }, afterRemove: function(item) { var dom; this.callParent(arguments); item.removeCls(this._itemCls); if (!item.ignoreBorderManagement) { item.removeClsWithUI(this.getDockCls(item.dock)); } dom = item.el.dom; if (!item.destroying && dom) { dom.parentNode.removeChild(dom); } this.childrenChanged = true; }, /** * This object is indexed by a component's `baseCls` to yield another object which * is then indexed by the component's `ui` to produce an array of CSS class names. * This array is indexed in the same manner as the `noBorderClassTable` and indicates * the a particular edge of a docked item or the body element is actually "collapsed" * with the component's outer border. * @private */ borderCollapseMap: { /* 'x-panel': { 'default': [] } */ }, /** * Returns the array of class names to add to a docked item or body element when for * the edges that should collapse with the outer component border. Basically, the * panel's outer border must look visually like a contiguous border but may need to * be realized by using the border of docked items and/or the body. This class name * allows the border color and width to be controlled accordingly and distinctly from * the border of the docked item or body element when it is not having its border * collapsed. * @private */ getBorderCollapseTable: function () { var me = this, map = me.borderCollapseMap, owner = me.owner, baseCls = owner.baseCls, ui = owner.ui, table; map = map[baseCls] || (map[baseCls] = {}); table = map[ui]; if (!table) { baseCls += '-' + ui + '-outer-border-'; map[ui] = table = [ 0, // TRBL baseCls + 'l', // 0001 = 1 baseCls + 'b', // 0010 = 2 baseCls + 'bl', // 0011 = 3 baseCls + 'r', // 0100 = 4 baseCls + 'rl', // 0101 = 5 baseCls + 'rb', // 0110 = 6 baseCls + 'rbl', // 0111 = 7 baseCls + 't', // 1000 = 8 baseCls + 'tl', // 1001 = 9 baseCls + 'tb', // 1010 = 10 baseCls + 'tbl', // 1011 = 11 baseCls + 'tr', // 1100 = 12 baseCls + 'trl', // 1101 = 13 baseCls + 'trb', // 1110 = 14 baseCls + 'trbl' // 1111 = 15 ]; } return table; }});