<!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-Component'>/**
|
</span> * This class is intended to be extended or created via the {@link Ext.Component#componentLayout layout}
|
* configuration property. See {@link Ext.Component#componentLayout} for additional details.
|
* @private
|
*/
|
Ext.define('Ext.layout.component.Component', {
|
|
/* Begin Definitions */
|
|
extend: 'Ext.layout.Layout',
|
|
<span id='Ext-layout-component-Component-property-type'> /* End Definitions */
|
</span>
|
type: 'component',
|
|
<span id='Ext-layout-component-Component-property-isComponentLayout'> isComponentLayout: true,
|
</span>
|
<span id='Ext-layout-component-Component-property-nullBox'> nullBox: {},
|
</span>
|
<span id='Ext-layout-component-Component-property-usesContentHeight'> usesContentHeight: true,
|
</span><span id='Ext-layout-component-Component-property-usesContentWidth'> usesContentWidth: true,
|
</span><span id='Ext-layout-component-Component-property-usesHeight'> usesHeight: true,
|
</span><span id='Ext-layout-component-Component-property-usesWidth'> usesWidth: true,
|
</span>
|
<span id='Ext-layout-component-Component-method-beginLayoutCycle'> beginLayoutCycle: function (ownerContext, firstCycle) {
|
</span> var me = this,
|
owner = me.owner,
|
ownerCtContext = ownerContext.ownerCtContext,
|
heightModel = ownerContext.heightModel,
|
widthModel = ownerContext.widthModel,
|
body = owner.el.dom === document.body,
|
lastBox = owner.lastBox || me.nullBox,
|
lastSize = owner.el.lastBox || me.nullBox,
|
dirty = !body,
|
ownerLayout, v, widthName, heightName;
|
|
me.callParent(arguments);
|
|
if (firstCycle) {
|
if (me.usesContentWidth) {
|
++ownerContext.consumersContentWidth;
|
}
|
if (me.usesContentHeight) {
|
++ownerContext.consumersContentHeight;
|
}
|
if (me.usesWidth) {
|
++ownerContext.consumersWidth;
|
}
|
if (me.usesHeight) {
|
++ownerContext.consumersHeight;
|
}
|
|
if (ownerCtContext && !ownerCtContext.hasRawContent) {
|
ownerLayout = owner.ownerLayout;
|
|
if (ownerLayout.usesWidth) {
|
++ownerContext.consumersWidth;
|
}
|
if (ownerLayout.usesHeight) {
|
++ownerContext.consumersHeight;
|
}
|
}
|
}
|
|
// we want to publish configured dimensions as early as possible and since this is
|
// a write phase...
|
|
if (widthModel.configured) {
|
// If the owner.el is the body, owner.width is not dirty (we don't want to write
|
// it to the body el). For other el's, the width may already be correct in the
|
// DOM (e.g., it is rendered in the markup initially). If the width is not
|
// correct in the DOM, this is only going to be the case on the first cycle.
|
widthName = widthModel.names.width;
|
|
if (!body) {
|
dirty = firstCycle ? owner[widthName] !== lastSize.width
|
: widthModel.constrained;
|
}
|
|
ownerContext.setWidth(owner[widthName], dirty);
|
} else if (ownerContext.isTopLevel) {
|
if (widthModel.calculated) {
|
v = lastBox.width;
|
ownerContext.setWidth(v, /*dirty=*/v != lastSize.width);
|
}
|
|
v = lastBox.x;
|
ownerContext.setProp('x', v, /*dirty=*/v != lastSize.x);
|
}
|
|
if (heightModel.configured) {
|
heightName = heightModel.names.height;
|
|
if (!body) {
|
dirty = firstCycle ? owner[heightName] !== lastSize.height
|
: heightModel.constrained;
|
}
|
|
ownerContext.setHeight(owner[heightName], dirty);
|
} else if (ownerContext.isTopLevel) {
|
if (heightModel.calculated) {
|
v = lastBox.height;
|
ownerContext.setHeight(v, v != lastSize.height);
|
}
|
|
v = lastBox.y;
|
ownerContext.setProp('y', v, /*dirty=*/v != lastSize.y);
|
}
|
},
|
|
<span id='Ext-layout-component-Component-method-finishedLayout'> finishedLayout: function(ownerContext) {
|
</span> var me = this,
|
elementChildren = ownerContext.children,
|
owner = me.owner,
|
len, i, elContext, lastBox, props;
|
|
// NOTE: In the code below we cannot use getProp because that will generate a layout dependency
|
|
// Set lastBox on managed child Elements.
|
// So that ContextItem.constructor can snag the lastBox for use by its undo method.
|
if (elementChildren) {
|
len = elementChildren.length;
|
for (i = 0; i < len; i++) {
|
elContext = elementChildren[i];
|
elContext.el.lastBox = elContext.props;
|
}
|
}
|
|
// Cache the size from which we are changing so that notifyOwner can notify the owningComponent with all essential information
|
ownerContext.previousSize = me.lastComponentSize;
|
|
// Cache the currently layed out size
|
me.lastComponentSize = owner.el.lastBox = props = ownerContext.props;
|
|
// lastBox is a copy of the defined props to allow save/restore of these (panel
|
// collapse needs this)
|
lastBox = owner.lastBox || (owner.lastBox = {});
|
lastBox.x = props.x;
|
lastBox.y = props.y;
|
lastBox.width = props.width;
|
lastBox.height = props.height;
|
lastBox.invalid = false;
|
|
me.callParent(arguments);
|
},
|
|
<span id='Ext-layout-component-Component-method-notifyOwner'> notifyOwner: function(ownerContext) {
|
</span> var me = this,
|
currentSize = me.lastComponentSize,
|
prevSize = ownerContext.previousSize,
|
args = [currentSize.width, currentSize.height];
|
|
if (prevSize) {
|
args.push(prevSize.width, prevSize.height);
|
}
|
|
// Call afterComponentLayout passing new size, and only passing old size if there *was* an old size.
|
me.owner.afterComponentLayout.apply(me.owner, args);
|
},
|
|
<span id='Ext-layout-component-Component-method-getTarget'> /**
|
</span> * Returns the owner component's resize element.
|
* @return {Ext.Element}
|
*/
|
getTarget : function() {
|
return this.owner.el;
|
},
|
|
<span id='Ext-layout-component-Component-method-getRenderTarget'> /**
|
</span> * Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.
|
*
|
* May be overridden in Component layout managers which implement an inner element.
|
* @return {Ext.Element}
|
*/
|
getRenderTarget : function() {
|
return this.owner.el;
|
},
|
|
<span id='Ext-layout-component-Component-method-cacheTargetInfo'> cacheTargetInfo: function(ownerContext) {
|
</span> var me = this,
|
targetInfo = me.targetInfo,
|
target;
|
|
if (!targetInfo) {
|
target = ownerContext.getEl('getTarget', me);
|
|
me.targetInfo = targetInfo = {
|
padding: target.getPaddingInfo(),
|
border: target.getBorderInfo()
|
};
|
}
|
|
return targetInfo;
|
},
|
|
<span id='Ext-layout-component-Component-method-measureAutoDimensions'> measureAutoDimensions: function (ownerContext, dimensions) {
|
</span> // Subtle But Important:
|
//
|
// We don't want to call getProp/hasProp et.al. unless we in fact need that value
|
// for our results! If we call it and don't need it, the layout manager will think
|
// we depend on it and will schedule us again should it change.
|
|
var me = this,
|
owner = me.owner,
|
containerLayout = owner.layout,
|
heightModel = ownerContext.heightModel,
|
widthModel = ownerContext.widthModel,
|
boxParent = ownerContext.boxParent,
|
isBoxParent = ownerContext.isBoxParent,
|
props = ownerContext.props,
|
isContainer,
|
ret = {
|
gotWidth: false,
|
gotHeight: false,
|
isContainer: (isContainer = !ownerContext.hasRawContent)
|
},
|
hv = dimensions || 3,
|
zeroWidth, zeroHeight,
|
needed = 0,
|
got = 0,
|
ready, size, temp;
|
|
// Note: this method is called *a lot*, so we have to be careful not to waste any
|
// time or make useless calls or, especially, read the DOM when we can avoid it.
|
|
//---------------------------------------------------------------------
|
// Width
|
|
if (widthModel.shrinkWrap && ownerContext.consumersContentWidth) {
|
++needed;
|
zeroWidth = !(hv & 1);
|
|
if (isContainer) {
|
// as a componentLayout for a container, we rely on the container layout to
|
// produce contentWidth...
|
if (zeroWidth) {
|
ret.contentWidth = 0;
|
ret.gotWidth = true;
|
++got;
|
} else if ((ret.contentWidth = ownerContext.getProp('contentWidth')) !== undefined) {
|
ret.gotWidth = true;
|
++got;
|
}
|
} else {
|
size = props.contentWidth;
|
|
if (typeof size == 'number') { // if (already determined)
|
ret.contentWidth = size;
|
ret.gotWidth = true;
|
++got;
|
} else {
|
if (zeroWidth) {
|
ready = true;
|
} else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
ready = false;
|
} else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {
|
// if we have no boxParent, we are ready, but a shrinkWrap boxParent
|
// artificially provides width early in the measurement process so
|
// we are ready to go in that case as well...
|
ready = true;
|
} else {
|
// lastly, we have a boxParent that will be given a width, so we
|
// can wait for that width to be set in order to properly measure
|
// whatever is inside...
|
ready = boxParent.hasDomProp('width');
|
}
|
|
if (ready) {
|
if (zeroWidth) {
|
temp = 0;
|
} else if (containerLayout && containerLayout.measureContentWidth) {
|
// Allow the container layout to do the measurement since it
|
// may have a better idea of how to do it even with no items:
|
temp = containerLayout.measureContentWidth(ownerContext);
|
} else {
|
temp = me.measureContentWidth(ownerContext);
|
}
|
|
if (!isNaN(ret.contentWidth = temp)) {
|
ownerContext.setContentWidth(temp, true);
|
ret.gotWidth = true;
|
++got;
|
}
|
}
|
}
|
}
|
} else if (widthModel.natural && ownerContext.consumersWidth) {
|
++needed;
|
size = props.width;
|
// zeroWidth does not apply
|
|
if (typeof size == 'number') { // if (already determined)
|
ret.width = size;
|
ret.gotWidth = true;
|
++got;
|
} else {
|
if (isBoxParent || !boxParent) {
|
ready = true;
|
} else {
|
// lastly, we have a boxParent that will be given a width, so we
|
// can wait for that width to be set in order to properly measure
|
// whatever is inside...
|
ready = boxParent.hasDomProp('width');
|
}
|
|
if (ready) {
|
if (!isNaN(ret.width = me.measureOwnerWidth(ownerContext))) {
|
ownerContext.setWidth(ret.width, false);
|
ret.gotWidth = true;
|
++got;
|
}
|
}
|
}
|
}
|
|
//---------------------------------------------------------------------
|
// Height
|
|
if (heightModel.shrinkWrap && ownerContext.consumersContentHeight) {
|
++needed;
|
zeroHeight = !(hv & 2);
|
|
if (isContainer) {
|
// don't ask unless we need to know...
|
if (zeroHeight) {
|
ret.contentHeight = 0;
|
ret.gotHeight = true;
|
++got;
|
} else if ((ret.contentHeight = ownerContext.getProp('contentHeight')) !== undefined) {
|
ret.gotHeight = true;
|
++got;
|
}
|
} else {
|
size = props.contentHeight;
|
|
if (typeof size == 'number') { // if (already determined)
|
ret.contentHeight = size;
|
ret.gotHeight = true;
|
++got;
|
} else {
|
if (zeroHeight) {
|
ready = true;
|
} else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {
|
ready = false;
|
} else if (owner.noWrap) {
|
ready = true;
|
} else if (!widthModel.shrinkWrap) {
|
// fixed width, so we need the width to determine the height...
|
ready = (ownerContext.bodyContext || ownerContext).hasDomProp('width');// && (!ownerContext.bodyContext || ownerContext.bodyContext.hasDomProp('width'));
|
} else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {
|
// if we have no boxParent, we are ready, but an autoWidth boxParent
|
// artificially provides width early in the measurement process so
|
// we are ready to go in that case as well...
|
ready = true;
|
} else {
|
// lastly, we have a boxParent that will be given a width, so we
|
// can wait for that width to be set in order to properly measure
|
// whatever is inside...
|
ready = boxParent.hasDomProp('width');
|
}
|
|
if (ready) {
|
if (zeroHeight) {
|
temp = 0;
|
} else if (containerLayout && containerLayout.measureContentHeight) {
|
// Allow the container layout to do the measurement since it
|
// may have a better idea of how to do it even with no items:
|
temp = containerLayout.measureContentHeight(ownerContext);
|
} else {
|
temp = me.measureContentHeight(ownerContext);
|
}
|
|
if (!isNaN(ret.contentHeight = temp)) {
|
ownerContext.setContentHeight(temp, true);
|
ret.gotHeight = true;
|
++got;
|
}
|
}
|
}
|
}
|
} else if (heightModel.natural && ownerContext.consumersHeight) {
|
++needed;
|
size = props.height;
|
// zeroHeight does not apply
|
|
if (typeof size == 'number') { // if (already determined)
|
ret.height = size;
|
ret.gotHeight = true;
|
++got;
|
} else {
|
if (isBoxParent || !boxParent) {
|
ready = true;
|
} else {
|
// lastly, we have a boxParent that will be given a width, so we
|
// can wait for that width to be set in order to properly measure
|
// whatever is inside...
|
ready = boxParent.hasDomProp('width');
|
}
|
|
if (ready) {
|
if (!isNaN(ret.height = me.measureOwnerHeight(ownerContext))) {
|
ownerContext.setHeight(ret.height, false);
|
ret.gotHeight = true;
|
++got;
|
}
|
}
|
}
|
}
|
|
if (boxParent) {
|
ownerContext.onBoxMeasured();
|
}
|
|
ret.gotAll = got == needed;
|
// see if we can avoid calling this method by storing something on ownerContext.
|
return ret;
|
},
|
|
<span id='Ext-layout-component-Component-method-measureContentWidth'> measureContentWidth: function (ownerContext) {
|
</span> // contentWidth includes padding, but not border, framing or margins
|
return ownerContext.el.getWidth() - ownerContext.getFrameInfo().width;
|
},
|
|
<span id='Ext-layout-component-Component-method-measureContentHeight'> measureContentHeight: function (ownerContext) {
|
</span> // contentHeight includes padding, but not border, framing or margins
|
return ownerContext.el.getHeight() - ownerContext.getFrameInfo().height;
|
},
|
|
<span id='Ext-layout-component-Component-method-measureOwnerHeight'> measureOwnerHeight: function (ownerContext) {
|
</span> return ownerContext.el.getHeight();
|
},
|
|
<span id='Ext-layout-component-Component-method-measureOwnerWidth'> measureOwnerWidth: function (ownerContext) {
|
</span> return ownerContext.el.getWidth();
|
}
|
});
|
</pre>
|
</body>
|
</html>
|
