/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* This class manages state information for a component or element during a layout.
*
* # Blocks
*
* A "block" is a required value that is preventing further calculation. When a layout has
* encountered a situation where it cannot possibly calculate results, it can associate
* itself with the context item and missing property so that it will not be rescheduled
* until that property is set.
*
* Blocks are a one-shot registration. Once the property changes, the block is removed.
*
* Be careful with blocks. If *any* further calculations can be made, a block is not the
* right choice.
*
* # Triggers
*
* Whenever any call to {@link #getProp}, {@link #getDomProp}, {@link #hasProp} or
* {@link #hasDomProp} is made, the current layout is automatically registered as being
* dependent on that property in the appropriate state. Any changes to the property will
* trigger the layout and it will be queued in the {@link Ext.layout.Context}.
*
* Triggers, once added, remain for the entire layout. Any changes to the property will
* reschedule all unfinished layouts in their trigger set.
*
* @private
*/
Ext.define('Ext.layout.ContextItem', {
requires: ['Ext.layout.ClassList'],
heightModel: null,
widthModel: null,
sizeModel: null,
/**
* There are several cases that allow us to skip (opt out) of laying out a component
* and its children as long as its `lastBox` is not marked as `invalid`. If anything
* happens to change things, the `lastBox` is marked as `invalid` by `updateLayout`
* as it ascends the component hierarchy.
*
* @property {Boolean} optOut
* @private
* @readonly
*/
optOut: false,
ownerSizePolicy: null, // plaed here by AbstractComponent.getSizeModel
boxChildren: null,
boxParent: null,
isBorderBoxValue: null,
children: [],
dirty: null,
// The number of dirty properties
dirtyCount: 0,
hasRawContent: true,
isContextItem: true,
isTopLevel: false,
consumersContentHeight: 0,
consumersContentWidth: 0,
consumersContainerHeight: 0,
consumersContainerWidth: 0,
consumersHeight: 0,
consumersWidth: 0,
ownerCtContext: null,
remainingChildDimensions: 0,
// the current set of property values:
props: null,
/**
* @property {Object} state
* State variables that are cleared when invalidated. Only applies to component items.
*/
state: null,
/**
* @property {Boolean} wrapsComponent
* True if this item wraps a Component (rather than an Element).
* @readonly
*/
wrapsComponent: false,
constructor: function (config) {
var me = this,
sizeModels = Ext.layout.SizeModel.sizeModels,
configured = sizeModels.configured,
shrinkWrap = sizeModels.shrinkWrap,
el, lastBox, ownerCt, ownerCtContext, props, sizeModel, target,
lastWidth, lastHeight, sameWidth, sameHeight, widthModel, heightModel, optOut;
Ext.apply(me, config);
el = me.el;
me.id = el.id;
// These hold collections of layouts that are either blocked or triggered by sets
// to our properties (either ASAP or after flushing to the DOM). All of them have
// the same structure:
//
// me.blocks = {
// width: {
// 'layout-1001': layout1001
// }
// }
//
// The property name is the primary key which yields an object keyed by layout id
// with the layout instance as the value. This prevents duplicate entries for one
// layout and gives O(1) access to the layout instance when we need to iterate and
// process them.
//
// me.blocks = {};
// me.domBlocks = {};
// me.domTriggers = {};
// me.triggers = {};
me.flushedProps = {};
me.props = props = {};
// the set of cached styles for the element:
me.styles = {};
target = me.target;
if (!target.isComponent) {
lastBox = el.lastBox;
} else {
me.wrapsComponent = true;
me.framing = target.frameSize || null;
me.isComponentChild = target.ownerLayout && target.ownerLayout.isComponentLayout;
lastBox = target.lastBox;
// These items are created top-down, so the ContextItem of our ownerCt should
// be available (if it is part of this layout run).
ownerCt = target.ownerCt;
if (ownerCt && (ownerCtContext = ownerCt.el && me.context.items[ownerCt.el.id])) {
me.ownerCtContext = ownerCtContext;
}
// If our ownerCtContext is in the run, it will have a SizeModel that we use to
// optimize the determination of our sizeModel.
me.sizeModel = sizeModel = target.getSizeModel(ownerCtContext &&
ownerCtContext.widthModel.pairsByHeightOrdinal[ownerCtContext.heightModel.ordinal]);
// NOTE: The initial determination of sizeModel is valid (thankfully) and is
// needed to cope with adding components to a layout run on-the-fly (e.g., in
// the menu overflow handler of a box layout). Since this is the case, we do
// not need to recompute the sizeModel in init unless it is a "full" init (as
// our ownerCt's sizeModel could have changed in that case).
me.widthModel = widthModel = sizeModel.width;
me.heightModel = heightModel = sizeModel.height;
// The lastBox is populated early but does not get an "invalid" property
// until layout has occurred. The "false" value is placed in the lastBox
// by Component.finishedLayout.
if (lastBox && lastBox.invalid === false) {
sameWidth = (target.width === (lastWidth = lastBox.width));
sameHeight = (target.height === (lastHeight = lastBox.height));
if (widthModel === shrinkWrap && heightModel === shrinkWrap) {
optOut = true;
} else if (widthModel === configured && sameWidth) {
optOut = heightModel === shrinkWrap ||
(heightModel === configured && sameHeight);
}
if (optOut) {
// Flag this component and capture its last size...
me.optOut = true;
props.width = lastWidth;
props.height = lastHeight;
}
}
}
me.lastBox = lastBox;
},
/**
* Clears all properties on this object except (perhaps) those not calculated by this
* component. This is more complex than it would seem because a layout can decide to
* invalidate its results and run the component's layouts again, but since some of the
* values may be calculated by the container, care must be taken to preserve those
* values.
*
* @param {Boolean} full True if all properties are to be invalidated, false to keep
* those calculated by the ownerCt.
* @return {Mixed} A value to pass as the first argument to {@link #initContinue}.
* @private
*/
init: function (full, options) {
var me = this,
oldProps = me.props,
oldDirty = me.dirty,
ownerCtContext = me.ownerCtContext,
ownerLayout = me.target.ownerLayout,
firstTime = !me.state,
ret = full || firstTime,
children, i, n, ownerCt, sizeModel, target,
oldHeightModel = me.heightModel,
oldWidthModel = me.widthModel,
newHeightModel, newWidthModel,
remainingCount = 0;
me.dirty = me.invalid = false;
me.props = {};
// Reset the number of child dimensions since the children will add their part:
me.remainingChildDimensions = 0;
if (me.boxChildren) {
me.boxChildren.length = 0; // keep array (more GC friendly)
}
if (!firstTime) {
me.clearAllBlocks('blocks');
me.clearAllBlocks('domBlocks');
}
// For Element wrappers, we are done...
if (!me.wrapsComponent) {
return ret;
}
// From here on, we are only concerned with Component wrappers...
target = me.target;
me.state = {}; // only Component wrappers need a "state"
if (firstTime) {
// This must occur before we proceed since it can do many things (like add
// child items perhaps):
if (target.beforeLayout && target.beforeLayout !== Ext.emptyFn) {
target.beforeLayout();
}
// Determine the ownerCtContext if we aren't given one. Normally the firstTime
// we meet a component is before the context is run, but it is possible for
// components to be added to a run that is already in progress. If so, we have
// to lookup the ownerCtContext since the odds are very high that the new
// component is a child of something already in the run. It is currently
// unsupported to drag in the owner of a running component (needs testing).
if (!ownerCtContext && (ownerCt = target.ownerCt)) {
ownerCtContext = me.context.items[ownerCt.el.id];
}
if (ownerCtContext) {
me.ownerCtContext = ownerCtContext;
me.isBoxParent = target.ownerLayout.isItemBoxParent(me);
} else {
me.isTopLevel = true; // this is used by initAnimation...
}
me.frameBodyContext = me.getEl('frameBody');
} else {
ownerCtContext = me.ownerCtContext;
// In theory (though untested), this flag can change on-the-fly...
me.isTopLevel = !ownerCtContext;
// Init the children element items since they may have dirty state (no need to
// do this the firstTime).
children = me.children;
for (i = 0, n = children.length; i < n; ++i) {
children[i].init(true);
}
}
// We need to know how we will determine content size: containers can look at the
// results of their items but non-containers or item-less containers with just raw
// markup need to be measured in the DOM:
me.hasRawContent = !(target.isContainer && target.items.items.length > 0);
if (full) {
// We must null these out or getSizeModel will assume they are the correct,
// dynamic size model and return them (the previous dynamic sizeModel).
me.widthModel = me.heightModel = null;
sizeModel = target.getSizeModel(ownerCtContext &&
ownerCtContext.widthModel.pairsByHeightOrdinal[ownerCtContext.heightModel.ordinal]);
if (firstTime) {
me.sizeModel = sizeModel;
}
me.widthModel = sizeModel.width;
me.heightModel = sizeModel.height;
// if we are a container child (e.g., not a docked item), and this is a full
// init, that means our parent was invalidated, and therefore both our width
// and our height are included in remainingChildDimensions
if (ownerCtContext && !me.isComponentChild) {
ownerCtContext.remainingChildDimensions += 2;
}
} else if (oldProps) {
// these are almost always calculated by the ownerCt (we might need to track
// this at some point more carefully):
me.recoverProp('x', oldProps, oldDirty);
me.recoverProp('y', oldProps, oldDirty);
// if these are calculated by the ownerCt, don't trash them:
if (me.widthModel.calculated) {
me.recoverProp('width', oldProps, oldDirty);
} else if ('width' in oldProps) {
++remainingCount;
}
if (me.heightModel.calculated) {
me.recoverProp('height', oldProps, oldDirty);
} else if ('height' in oldProps) {
++remainingCount;
}
// if we are a container child and this is not a full init, that means our
// parent was not invalidated and therefore only the dimensions that were
// set last time and removed from remainingChildDimensions last time, need to
// be added back to remainingChildDimensions. This only needs to happen for
// properties that we don't recover above (model=calculated)
if (ownerCtContext && !me.isComponentChild) {
ownerCtContext.remainingChildDimensions += remainingCount;
}
}
if (oldProps && ownerLayout && ownerLayout.manageMargins) {
me.recoverProp('margin-top', oldProps, oldDirty);
me.recoverProp('margin-right', oldProps, oldDirty);
me.recoverProp('margin-bottom', oldProps, oldDirty);
me.recoverProp('margin-left', oldProps, oldDirty);
}
// Process any invalidate options present. These can only come from explicit calls
// to the invalidate() method.
if (options) {
// Consider a container box with wrapping text. If the box is made wider, the
// text will take up less height (until there is no more wrapping). Conversely,
// if the box is made narrower, the height starts to increase due to wrapping.
//
// Imposing a minWidth constraint would increase the width. This may decrease
// the height. If the box is shrinkWrap, however, the width will already be
// such that there is no wrapping, so the height will not further decrease.
// Since the height will also not increase if we widen the box, there is no
// problem simultaneously imposing a minHeight or maxHeight constraint.
//
// When we impose as maxWidth constraint, however, we are shrinking the box
// which may increase the height. If we are imposing a maxHeight constraint,
// that is fine because a further increased height will still need to be
// constrained. But if we are imposing a minHeight constraint, we cannot know
// whether the increase in height due to wrapping will be greater than the
// minHeight. If we impose a minHeight constraint at the same time, then, we
// could easily be locking in the wrong height.
//
// It is important to note that this logic applies to simultaneously *adding*
// both a maxWidth and a minHeight constraint. It is perfectly fine to have
// a state with both constraints, but we cannot add them both at once.
newHeightModel = options.heightModel;
newWidthModel = options.widthModel;
if (newWidthModel && newHeightModel && oldWidthModel && oldHeightModel) {
if (oldWidthModel.shrinkWrap && oldHeightModel.shrinkWrap) {
if (newWidthModel.constrainedMax && newHeightModel.constrainedMin) {
newHeightModel = null;
}
}
}
// Apply size model updates (if any) and state updates (if any).
if (newWidthModel) {
me.widthModel = newWidthModel;
}
if (newHeightModel) {
me.heightModel = newHeightModel;
}
if (options.state) {
Ext.apply(me.state, options.state);
}
}
return ret;
},
/**
* @private
*/
initContinue: function (full) {
var me = this,
ownerCtContext = me.ownerCtContext,
comp = me.target,
widthModel = me.widthModel,
hierarchyState = comp.getHierarchyState(),
boxParent;
if (widthModel.fixed) { // calculated or configured
hierarchyState.inShrinkWrapTable = false;
} else {
delete hierarchyState.inShrinkWrapTable;
}
if (full) {
if (ownerCtContext && widthModel.shrinkWrap) {
boxParent = ownerCtContext.isBoxParent ? ownerCtContext : ownerCtContext.boxParent;
if (boxParent) {
boxParent.addBoxChild(me);
}
} else if (widthModel.natural) {
me.boxParent = ownerCtContext;
}
}
return full;
},
/**
* @private
*/
initDone: function(containerLayoutDone) {
var me = this,
props = me.props,
state = me.state;
// These properties are only set when they are true:
if (me.remainingChildDimensions === 0) {
props.containerChildrenSizeDone = true;
}
if (containerLayoutDone) {
props.containerLayoutDone = true;
}
if (me.boxChildren && me.boxChildren.length && me.widthModel.shrinkWrap) {
// set a very large width to allow the children to measure their natural
// widths (this is cleared once all children have been measured):
me.el.setWidth(10000);
// don't run layouts for this component until we clear this width...
state.blocks = (state.blocks || 0) + 1;
}
},
/**
* @private
*/
initAnimation: function() {
var me = this,
target = me.target,
ownerCtContext = me.ownerCtContext;
if (ownerCtContext && ownerCtContext.isTopLevel) {
// See which properties we are supposed to animate to their new state.
// If there are any, queue ourself to be animated by the owning Context
me.animatePolicy = target.ownerLayout.getAnimatePolicy(me);
} else if (!ownerCtContext && target.isCollapsingOrExpanding && target.animCollapse) {
// Collapsing/expnding a top level Panel with animation. We need to fabricate
// an animatePolicy depending on which dimension the collapse is using,
// isCollapsingOrExpanding is set during the collapse/expand process.
me.animatePolicy = target.componentLayout.getAnimatePolicy(me);
}
if (me.animatePolicy) {
me.context.queueAnimation(me);
}
},
/**
* Queue the addition of a class name (or array of class names) to this ContextItem's target when next flushed.
*/
addCls: function(newCls) {
this.getClassList().addMany(newCls);
},
/**
* Queue the removal of a class name (or array of class names) from this ContextItem's target when next flushed.
*/
removeCls: function(removeCls) {
this.getClassList().removeMany(removeCls);
},
/**
* Adds a block.
*
* @param {String} name The name of the block list ('blocks' or 'domBlocks').
* @param {Ext.layout.Layout} layout The layout that is blocked.
* @param {String} propName The property name that blocked the layout (e.g., 'width').
* @private
*/
addBlock: function (name, layout, propName) {
var me = this,
collection = me[name] || (me[name] = {}),
blockedLayouts = collection[propName] || (collection[propName] = {});
if (!blockedLayouts[layout.id]) {
blockedLayouts[layout.id] = layout;
++layout.blockCount;
++me.context.blockCount;
}
},
addBoxChild: function (boxChildItem) {
var me = this,
children,
widthModel = boxChildItem.widthModel;
boxChildItem.boxParent = this;
// Children that are widthModel.auto (regardless of heightModel) that measure the
// DOM (by virtue of hasRawContent), need to wait for their "box parent" to be sized.
// If they measure too early, they will be wrong results. In the widthModel.shrinkWrap
// case, the boxParent "crushes" the child. In the case of widthModel.natural, the
// boxParent's width is likely a key part of the child's width (e.g., "50%" or just
// normal block-level behavior of 100% width)
boxChildItem.measuresBox = widthModel.shrinkWrap ? boxChildItem.hasRawContent : widthModel.natural;
if (boxChildItem.measuresBox) {
children = me.boxChildren;
if (children) {
children.push(boxChildItem);
} else {
me.boxChildren = [ boxChildItem ];
}
}
},
/**
* Adds x and y values from a props object to a styles object as "left" and "top" values.
* Overridden to add the x property as "right" in rtl mode.
* @property {Object} styles A styles object for an Element
* @property {Object} props A ContextItem props object
* @return {Number} count The number of styles that were set.
* @private
*/
addPositionStyles: function(styles, props) {
var x = props.x,
y = props.y,
count = 0;
if (x !== undefined) {
styles.left = x + 'px';
++count;
}
if (y !== undefined) {
styles.top = y + 'px';
++count;
}
return count;
},
/**
* Adds a trigger.
*
* @param {String} propName The property name that triggers the layout (e.g., 'width').
* @param {Boolean} inDom True if the trigger list is `domTriggers`, false if `triggers`.
* @private
*/
addTrigger: function (propName, inDom) {
var me = this,
name = inDom ? 'domTriggers' : 'triggers',
collection = me[name] || (me[name] = {}),
context = me.context,
layout = context.currentLayout,
triggers = collection[propName] || (collection[propName] = {});
if (!triggers[layout.id]) {
triggers[layout.id] = layout;
++layout.triggerCount;
triggers = context.triggers[inDom ? 'dom' : 'data'];
(triggers[layout.id] || (triggers[layout.id] = [])).push({
item: this,
prop: propName
});
if (me.props[propName] !== undefined) {
if (!inDom || !(me.dirty && (propName in me.dirty))) {
++layout.firedTriggers;
}
}
}
},
boxChildMeasured: function () {
var me = this,
state = me.state,
count = (state.boxesMeasured = (state.boxesMeasured || 0) + 1);
if (count == me.boxChildren.length) {
// all of our children have measured themselves, so we can clear the width
// and resume layouts for this component...
state.clearBoxWidth = 1;
++me.context.progressCount;
me.markDirty();
}
},
borderNames: [ 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'],
marginNames: [ 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ],
paddingNames: [ 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' ],
trblNames: [ 'top', 'right', 'bottom', 'left' ],
cacheMissHandlers: {
borderInfo: function (me) {
var info = me.getStyles(me.borderNames, me.trblNames);
info.width = info.left + info.right;
info.height = info.top + info.bottom;
return info;
},
marginInfo: function (me) {
var info = me.getStyles(me.marginNames, me.trblNames);
info.width = info.left + info.right;
info.height = info.top + info.bottom;
return info;
},
paddingInfo: function (me) {
// if this context item's target is a framed component the padding is on the frameBody, not on the main el
var item = me.frameBodyContext || me,
info = item.getStyles(me.paddingNames, me.trblNames);
info.width = info.left + info.right;
info.height = info.top + info.bottom;
return info;
}
},
checkCache: function (entry) {
return this.cacheMissHandlers[entry](this);
},
clearAllBlocks: function (name) {
var collection = this[name],
propName;
if (collection) {
for (propName in collection) {
this.clearBlocks(name, propName);
}
}
},
/**
* Removes any blocks on a property in the specified set. Any layouts that were blocked
* by this property and are not still blocked (by other properties) will be rescheduled.
*
* @param {String} name The name of the block list ('blocks' or 'domBlocks').
* @param {String} propName The property name that blocked the layout (e.g., 'width').
* @private
*/
clearBlocks: function (name, propName) {
var collection = this[name],
blockedLayouts = collection && collection[propName],
context, layout, layoutId;
if (blockedLayouts) {
delete collection[propName];
context = this.context;
for (layoutId in blockedLayouts) {
layout = blockedLayouts[layoutId];
--context.blockCount;
if (! --layout.blockCount && !layout.pending && !layout.done) {
context.queueLayout(layout);
}
}
}
},
/**
* Registers a layout in the block list for the given property. Once the property is
* set in the {@link Ext.layout.Context}, the layout is unblocked.
*
* @param {Ext.layout.Layout} layout
* @param {String} propName The property name that blocked the layout (e.g., 'width').
*/
block: function (layout, propName) {
this.addBlock('blocks', layout, propName);
},
/**
* Registers a layout in the DOM block list for the given property. Once the property
* flushed to the DOM by the {@link Ext.layout.Context}, the layout is unblocked.
*
* @param {Ext.layout.Layout} layout
* @param {String} propName The property name that blocked the layout (e.g., 'width').
*/
domBlock: function (layout, propName) {
this.addBlock('domBlocks', layout, propName);
},
/**
* Reschedules any layouts associated with a given trigger.
*
* @param {String} name The name of the trigger list ('triggers' or 'domTriggers').
* @param {String} propName The property name that triggers the layout (e.g., 'width').
* @private
*/
fireTriggers: function (name, propName) {
var collection = this[name],
triggers = collection && collection[propName],
context = this.context,
layout, layoutId;
if (triggers) {
for (layoutId in triggers) {
layout = triggers[layoutId];
++layout.firedTriggers;
if (!layout.done && !layout.blockCount && !layout.pending) {
context.queueLayout(layout);
}
}
}
},
/**
* Flushes any updates in the dirty collection to the DOM. This is only called if there
* are dirty entries because this object is only added to the flushQueue of the
* {@link Ext.layout.Context} when entries become dirty.
*/
flush: function () {
var me = this,
dirty = me.dirty,
state = me.state,
targetEl = me.el;
me.dirtyCount = 0;
// Flush added/removed classes
if (me.classList && me.classList.dirty) {
me.classList.flush();
}
// Set any queued DOM attributes
if ('attributes' in me) {
targetEl.set(me.attributes);
delete me.attributes;
}
// Set any queued DOM HTML content
if ('innerHTML' in me) {
targetEl.innerHTML = me.innerHTML;
delete me.innerHTML;
}
if (state && state.clearBoxWidth) {
state.clearBoxWidth = 0;
me.el.setStyle('width', null);
if (! --state.blocks) {
me.context.queueItemLayouts(me);
}
}
if (dirty) {
delete me.dirty;
me.writeProps(dirty, true);
}
},
/**
* @private
*/
flushAnimations: function() {
var me = this,
animateFrom = me.previousSize,
target, targetAnim, duration, animateProps, anim,
changeCount, j, propsLen, propName, oldValue, newValue;
// Only animate if the Component has been previously layed out: first layout should not animate
if (animateFrom) {
target = me.target;
targetAnim = target.layout && target.layout.animate;
if (targetAnim) {
duration = Ext.isNumber(targetAnim) ? targetAnim : targetAnim.duration;
}
animateProps = Ext.Object.getKeys(me.animatePolicy);
// Create an animation block using the targetAnim configuration to provide defaults.
// They may want custom duration, or easing, or listeners.
anim = Ext.apply({}, {
from: {},
to: {},
duration: duration || Ext.fx.Anim.prototype.duration
}, targetAnim);
for (changeCount = 0, j = 0, propsLen = animateProps.length; j < propsLen; j++) {
propName = animateProps[j];
oldValue = animateFrom[propName];
newValue = me.peek(propName);
if (oldValue != newValue) {
propName = me.translateProps[propName]||propName;
anim.from[propName] = oldValue;
anim.to[propName] = newValue;
++changeCount;
}
}
// If any values have changed, kick off animation from the cached old values to the new values
if (changeCount) {
// It'a Panel being collapsed. rollback, and then fix the class name string
if (me.isCollapsingOrExpanding === 1) {
target.componentLayout.undoLayout(me);
}
// Otherwise, undo just the animated properties so the animation can proceed from the old layout.
else {
me.writeProps(anim.from);
}
me.el.animate(anim);
Ext.fx.Manager.getFxQueue(me.el.id)[0].on({
afteranimate: function() {
if (me.isCollapsingOrExpanding === 1) {
target.componentLayout.redoLayout(me);
target.afterCollapse(true);
} else if (me.isCollapsingOrExpanding === 2) {
target.afterExpand(true);
}
}
});
}
}
},
/**
* Gets the border information for the element as an object with left, top, right and
* bottom properties holding border size in pixels. This object is only read from the
* DOM on first request and is cached.
* @return {Object}
*/
getBorderInfo: function () {
var me = this,
info = me.borderInfo;
if (!info) {
me.borderInfo = info = me.checkCache('borderInfo');
}
return info;
},
/**
* Returns a ClassList-like object to buffer access to this item's element's classes.
*/
getClassList: function () {
return this.classList || (this.classList = new Ext.layout.ClassList(this));
},
/**
* @member Ext.layout.ContextItem
* Returns the context item for an owned element. This should only be called on a
* component's item. The list of child items is used to manage invalidating calculated
* results.
* @param {String/Ext.dom.Element} nameOrEl The element or the name of an owned element
* @param {Ext.layout.container.Container/Ext.Component} [owner] The owner of the
* named element if the passed "nameOrEl" parameter is a String. Defaults to this
* ContextItem's "target" property. For more details on owned elements see
* {@link Ext.Component#cfg-childEls childEls} and
* {@link Ext.Component#renderSelectors renderSelectors}
* @return {Ext.layout.ContextItem}
*/
getEl: function (nameOrEl, owner) {
var me = this,
src, el, elContext;
if (nameOrEl) {
if (nameOrEl.dom) {
el = nameOrEl;
} else {
src = me.target;
if (owner) {
src = owner;
}
el = src[nameOrEl];
if (typeof el == 'function') { // ex 'getTarget'
el = el.call(src);
if (el === me.el) {
return this; // comp.getTarget() often returns comp.el
}
}
}
if (el) {
elContext = me.context.getEl(me, el);
}
}
return elContext || null;
},
/**
* Gets the "frame" information for the element as an object with left, top, right and
* bottom properties holding border+framing size in pixels. This object is calculated
* on first request and is cached.
* @return {Object}
*/
getFrameInfo: function () {
var me = this,
info = me.frameInfo,
framing, border;
if (!info) {
framing = me.framing;
border = me.getBorderInfo();
me.frameInfo = info =
framing ? {
top : framing.top + border.top,
right : framing.right + border.right,
bottom: framing.bottom + border.bottom,
left : framing.left + border.left,
width : framing.width + border.width,
height: framing.height + border.height
} : border;
}
return info;
},
/**
* Gets the margin information for the element as an object with left, top, right and
* bottom properties holding margin size in pixels. This object is only read from the
* DOM on first request and is cached.
* @return {Object}
*/
getMarginInfo: function () {
var me = this,
info = me.marginInfo,
comp, manageMargins, margins, ownerLayout, ownerLayoutId;
if (!info) {
if (!me.wrapsComponent) {
info = me.checkCache('marginInfo');
} else {
comp = me.target;
ownerLayout = comp.ownerLayout;
ownerLayoutId = ownerLayout ? ownerLayout.id : null;
manageMargins = ownerLayout && ownerLayout.manageMargins;
// Option #1 for configuring margins on components is the "margin" config
// property. When supplied, this config is written to the DOM during the
// render process (see AbstractComponent#initStyles).
//
// Option #2 is available to some layouts (e.g., Box, Border, Fit) that
// handle margin calculations themselves. These layouts support a "margins"
// config property on their items and they have a "defaultMargins" config
// property. These margin values are added to the "natural" margins read
// from the DOM and 0's are written to the DOM after they are added.
// To avoid having to do all this on every layout, we cache the results on
// the component in the (private) "margin$" property. We identify the cache
// results as belonging to the appropriate ownerLayout in case items are
// moved around.
info = comp.margin$;
if (info && info.ownerId !== ownerLayoutId) {
// got one but from the wrong owner
info = null;
// if (manageMargins) {
// TODO: clear inline margins (the 0's we wrote last time)???
// }
}
if (!info) { // if (no cache)
// CSS margins are only checked if there isn't a margin property on the component
info = me.parseMargins(comp, comp.margin) || me.checkCache('marginInfo');
// Some layouts also support margins and defaultMargins, e.g. Fit, Border, Box
if (manageMargins) {
margins = me.parseMargins(comp, comp.margins, ownerLayout.defaultMargins);
if (margins) { // if (using 'margins' and/or 'defaultMargins')
// margin and margins can both be present at the same time and must be combined
info = {
top: info.top + margins.top,
right: info.right + margins.right,
bottom: info.bottom + margins.bottom,
left: info.left + margins.left
};
}
me.setProp('margin-top', 0);
me.setProp('margin-right', 0);
me.setProp('margin-bottom', 0);
me.setProp('margin-left', 0);
}
// cache the layout margins and tag them with the layout id:
info.ownerId = ownerLayoutId;
comp.margin$ = info;
}
info.width = info.left + info.right;
info.height = info.top + info.bottom;
}
me.marginInfo = info;
}
return info;
},
/**
* clears the margin cache so that marginInfo get re-read from the dom on the next call to getMarginInfo()
* This is needed in some special cases where the margins have changed since the last layout, making the cached
* values invalid. For example collapsed window headers have different margin than expanded ones.
*/
clearMarginCache: function() {
delete this.marginInfo;
delete this.target.margin$;
},
/**
* Gets the padding information for the element as an object with left, top, right and
* bottom properties holding padding size in pixels. This object is only read from the
* DOM on first request and is cached.
* @return {Object}
*/
getPaddingInfo: function () {
var me = this,
info = me.paddingInfo;
if (!info) {
me.paddingInfo = info = me.checkCache('paddingInfo');
}
return info;
},
/**
* Gets a property of this object. Also tracks the current layout as dependent on this
* property so that changes to it will trigger the layout to be recalculated.
* @param {String} propName The property name that blocked the layout (e.g., 'width').
* @return {Object} The property value or undefined if not yet set.
*/
getProp: function (propName) {
var me = this,
result = me.props[propName];
me.addTrigger(propName);
return result;
},
/**
* Gets a property of this object if it is correct in the DOM. Also tracks the current
* layout as dependent on this property so that DOM writes of it will trigger the
* layout to be recalculated.
* @param {String} propName The property name (e.g., 'width').
* @return {Object} The property value or undefined if not yet set or is dirty.
*/
getDomProp: function (propName) {
var me = this,
result = (me.dirty && (propName in me.dirty)) ? undefined : me.props[propName];
me.addTrigger(propName, true);
return result;
},
/**
* Returns a style for this item. Each style is read from the DOM only once on first
* request and is then cached. If the value is an integer, it is parsed automatically
* (so '5px' is not returned, but rather 5).
*
* @param {String} styleName The CSS style name.
* @return {Object} The value of the DOM style (parsed as necessary).
*/
getStyle: function (styleName) {
var me = this,
styles = me.styles,
info, value;
if (styleName in styles) {
value = styles[styleName];
} else {
info = me.styleInfo[styleName];
value = me.el.getStyle(styleName);
if (info && info.parseInt) {
value = parseInt(value, 10) || 0;
}
styles[styleName] = value;
}
return value;
},
/**
* Returns styles for this item. Each style is read from the DOM only once on first
* request and is then cached. If the value is an integer, it is parsed automatically
* (so '5px' is not returned, but rather 5).
*
* @param {String[]} styleNames The CSS style names.
* @param {String[]} [altNames] The alternate names for the returned styles. If given,
* these names must correspond one-for-one to the `styleNames`.
* @return {Object} The values of the DOM styles (parsed as necessary).
*/
getStyles: function (styleNames, altNames) {
var me = this,
styleCache = me.styles,
values = {},
hits = 0,
n = styleNames.length,
i, missing, missingAltNames, name, info, styleInfo, styles, value;
altNames = altNames || styleNames;
// We are optimizing this for all hits or all misses. If we hit on all styles, we
// don't create a missing[]. If we miss on all styles, we also don't create one.
for (i = 0; i < n; ++i) {
name = styleNames[i];
if (name in styleCache) {
values[altNames[i]] = styleCache[name];
++hits;
if (i && hits==1) { // if (first hit was after some misses)
missing = styleNames.slice(0, i);
missingAltNames = altNames.slice(0, i);
}
} else if (hits) {
(missing || (missing = [])).push(name);
(missingAltNames || (missingAltNames = [])).push(altNames[i]);
}
}
if (hits < n) {
missing = missing || styleNames;
missingAltNames = missingAltNames || altNames;
styleInfo = me.styleInfo;
styles = me.el.getStyle(missing);
for (i = missing.length; i--; ) {
name = missing[i];
info = styleInfo[name];
value = styles[name];
if (info && info.parseInt) {
value = parseInt(value, 10) || 0;
}
values[missingAltNames[i]] = value;
styleCache[name] = value;
}
}
return values;
},
/**
* Returns true if the given property has been set. This is equivalent to calling
* {@link #getProp} and not getting an undefined result. In particular, this call
* registers the current layout to be triggered by changes to this property.
*
* @param {String} propName The property name (e.g., 'width').
* @return {Boolean}
*/
hasProp: function (propName) {
return this.getProp(propName) != null;
},
/**
* Returns true if the given property is correct in the DOM. This is equivalent to
* calling {@link #getDomProp} and not getting an undefined result. In particular,
* this call registers the current layout to be triggered by flushes of this property.
*
* @param {String} propName The property name (e.g., 'width').
* @return {Boolean}
*/
hasDomProp: function (propName) {
return this.getDomProp(propName) != null;
},
/**
* Invalidates the component associated with this item. The layouts for this component
* and all of its contained items will be re-run after first clearing any computed
* values.
*
* If state needs to be carried forward beyond the invalidation, the `options` parameter
* can be used.
*
* @param {Object} options An object describing how to handle the invalidation.
* @param {Object} options.state An object to {@link Ext#apply} to the {@link #state}
* of this item after invalidation clears all other properties.
* @param {Function} options.before A function to call after the context data is cleared
* and before the {@link Ext.layout.Layout#beginLayoutCycle} methods are called.
* @param {Ext.layout.ContextItem} options.before.item This ContextItem.
* @param {Object} options.before.options The options object passed to {@link #invalidate}.
* @param {Function} options.after A function to call after the context data is cleared
* and after the {@link Ext.layout.Layout#beginLayoutCycle} methods are called.
* @param {Ext.layout.ContextItem} options.after.item This ContextItem.
* @param {Object} options.after.options The options object passed to {@link #invalidate}.
* @param {Object} options.scope The scope to use when calling the callback functions.
*/
invalidate: function (options) {
this.context.queueInvalidate(this, options);
},
markDirty: function () {
if (++this.dirtyCount == 1) {
// our first dirty property... queue us for flush
this.context.queueFlush(this);
}
},
onBoxMeasured: function () {
var boxParent = this.boxParent,
state = this.state;
if (boxParent && boxParent.widthModel.shrinkWrap && !state.boxMeasured && this.measuresBox) {
// since an autoWidth boxParent is holding a width on itself to allow each
// child to measure
state.boxMeasured = 1; // best to only call once per child
boxParent.boxChildMeasured();
}
},
parseMargins: function (comp, margins, defaultMargins) {
if (margins === true) {
margins = 5;
}
var type = typeof margins,
ret;
if (type == 'string' || type == 'number') {
ret = comp.parseBox(margins);
} else if (margins || defaultMargins) {
ret = { top: 0, right: 0, bottom: 0, left: 0 }; // base defaults
if (defaultMargins) {
Ext.apply(ret, this.parseMargins(comp, defaultMargins)); // + layout defaults
}
if (margins) {
margins = Ext.apply(ret, comp.parseBox(margins)); // + config
}
}
return ret;
},
peek: function (propName) {
return this.props[propName];
},
/**
* Recovers a property value from the last computation and restores its value and
* dirty state.
*
* @param {String} propName The name of the property to recover.
* @param {Object} oldProps The old "props" object from which to recover values.
* @param {Object} oldDirty The old "dirty" object from which to recover state.
*/
recoverProp: function (propName, oldProps, oldDirty) {
var me = this,
props = me.props,
dirty;
if (propName in oldProps) {
props[propName] = oldProps[propName];
if (oldDirty && propName in oldDirty) {
dirty = me.dirty || (me.dirty = {});
dirty[propName] = oldDirty[propName];
}
}
},
redo: function(deep) {
var me = this,
items, len, i;
me.revertProps(me.props);
if (deep && me.wrapsComponent) {
// Rollback the state of child Components
if (me.childItems) {
for (i = 0, items = me.childItems, len = items.length; i < len; i++) {
items[i].redo(deep);
}
}
// Rollback the state of child Elements
for (i = 0, items = me.children, len = items.length; i < len; i++) {
items[i].redo();
}
}
},
/**
* Removes a cached ContextItem that was created using {@link #getEl}. It may be
* necessary to call this method if the dom reference for owned element changes so
* that {@link #getEl} can be called again to reinitialize the ContextItem with the
* new element.
* @param {String/Ext.dom.Element} nameOrEl The element or the name of an owned element
* @param {Ext.layout.container.Container/Ext.Component} [owner] The owner of the
* named element if the passed "nameOrEl" parameter is a String. Defaults to this
* ContextItem's "target" property.
*/
removeEl: function(nameOrEl, owner) {
var me = this,
src, el;
if (nameOrEl) {
if (nameOrEl.dom) {
el = nameOrEl;
} else {
src = me.target;
if (owner) {
src = owner;
}
el = src[nameOrEl];
if (typeof el == 'function') { // ex 'getTarget'
el = el.call(src);
if (el === me.el) {
return this; // comp.getTarget() often returns comp.el
}
}
}
if (el) {
me.context.removeEl(me, el);
}
}
},
revertProps: function (props) {
var name,
flushed = this.flushedProps,
reverted = {};
for (name in props) {
if (flushed.hasOwnProperty(name)) {
reverted[name] = props[name];
}
}
this.writeProps(reverted);
},
/**
* Queue the setting of a DOM attribute on this ContextItem's target when next flushed.
*/
setAttribute: function(name, value) {
var me = this;
if (!me.attributes) {
me.attributes = {};
}
me.attributes[name] = value;
me.markDirty();
},
setBox: function (box) {
var me = this;
if ('left' in box) {
me.setProp('x', box.left);
}
if ('top' in box) {
me.setProp('y', box.top);
}
// if sizeModel says we should not be setting these, the appropriate calls will be
// null operations... otherwise, we must set these values, so what we have in box
// is what we go with (undefined, NaN and no change are handled at a lower level):
me.setSize(box.width, box.height);
},
/**
* Sets the contentHeight property. If the component uses raw content, then only the
* measured height is acceptable.
*
* Calculated values can sometimes be NaN or undefined, which generally mean the
* calculation is not done. To indicate that such as value was passed, 0 is returned.
* Otherwise, 1 is returned.
*
* If the caller is not measuring (i.e., they are calculating) and the component has raw
* content, 1 is returned indicating that the caller is done.
*/
setContentHeight: function (height, measured) {
if (!measured && this.hasRawContent) {
return 1;
}
return this.setProp('contentHeight', height);
},
/**
* Sets the contentWidth property. If the component uses raw content, then only the
* measured width is acceptable.
*
* Calculated values can sometimes be NaN or undefined, which generally means that the
* calculation is not done. To indicate that such as value was passed, 0 is returned.
* Otherwise, 1 is returned.
*
* If the caller is not measuring (i.e., they are calculating) and the component has raw
* content, 1 is returned indicating that the caller is done.
*/
setContentWidth: function (width, measured) {
if (!measured && this.hasRawContent) {
return 1;
}
return this.setProp('contentWidth', width);
},
/**
* Sets the contentWidth and contentHeight properties. If the component uses raw content,
* then only the measured values are acceptable.
*
* Calculated values can sometimes be NaN or undefined, which generally means that the
* calculation is not done. To indicate that either passed value was such a value, false
* returned. Otherwise, true is returned.
*
* If the caller is not measuring (i.e., they are calculating) and the component has raw
* content, true is returned indicating that the caller is done.
*/
setContentSize: function (width, height, measured) {
return this.setContentWidth(width, measured) +
this.setContentHeight(height, measured) == 2;
},
/**
* Sets a property value. This will unblock and/or trigger dependent layouts if the
* property value is being changed. Values of NaN and undefined are not accepted by
* this method.
*
* @param {String} propName The property name (e.g., 'width').
* @param {Object} value The new value of the property.
* @param {Boolean} dirty Optionally specifies if the value is currently in the DOM
* (default is `true` which indicates the value is not in the DOM and must be flushed
* at some point).
* @return {Number} 1 if this call specified the property value, 0 if not.
*/
setProp: function (propName, value, dirty) {
var me = this,
valueType = typeof value,
borderBox, info;
if (valueType == 'undefined' || (valueType === 'number' && isNaN(value))) {
return 0;
}
if (me.props[propName] === value) {
return 1;
}
me.props[propName] = value;
++me.context.progressCount;
if (dirty === false) {
// if the prop is equivalent to what is in the DOM (we won't be writing it),
// we need to clear hard blocks (domBlocks) on that property.
me.fireTriggers('domTriggers', propName);
me.clearBlocks('domBlocks', propName);
} else {
info = me.styleInfo[propName];
if (info) {
if (!me.dirty) {
me.dirty = {};
}
if (propName == 'width' || propName == 'height') {
borderBox = me.isBorderBoxValue;
if (borderBox === null) {
me.isBorderBoxValue = borderBox = !!me.el.isBorderBox();
}
if (!borderBox) {
me.borderInfo || me.getBorderInfo();
me.paddingInfo || me.getPaddingInfo();
}
}
me.dirty[propName] = value;
me.markDirty();
}
}
// we always clear soft blocks on set
me.fireTriggers('triggers', propName);
me.clearBlocks('blocks', propName);
return 1;
},
/**
* Sets the height and constrains the height to min/maxHeight range.
*
* @param {Number} height The height.
* @param {Boolean} [dirty=true] Specifies if the value is currently in the DOM. A
* value of `false` indicates that the value is already in the DOM.
* @return {Number} The actual height after constraining.
*/
setHeight: function (height, dirty /*, private {Boolean} force */) {
var me = this,
comp = me.target,
ownerCtContext = me.ownerCtContext,
frameBody, frameInfo, min, oldHeight, rem;
if (height < 0) {
height = 0;
}
if (!me.wrapsComponent) {
if (!me.setProp('height', height, dirty)) {
return NaN;
}
} else {
min = me.collapsedVert ? 0 : (comp.minHeight || 0);
height = Ext.Number.constrain(height, min, comp.maxHeight);
oldHeight = me.props.height;
if (!me.setProp('height', height, dirty)) {
return NaN;
}
// if we are a container child, since the height is now known we can decrement
// the number of remainingChildDimensions that the ownerCtContext is waiting on.
if (ownerCtContext && !me.isComponentChild && isNaN(oldHeight)) {
rem = --ownerCtContext.remainingChildDimensions;
if (!rem) {
// if there are 0 remainingChildDimensions set containerChildrenSizeDone
// on the ownerCtContext to indicate that all of its children's dimensions
// are known
ownerCtContext.setProp('containerChildrenSizeDone', true);
}
}
frameBody = me.frameBodyContext;
if (frameBody){
frameInfo = me.getFrameInfo();
frameBody.setHeight(height - frameInfo.height, dirty);
}
}
return height;
},
/**
* Sets the height and constrains the width to min/maxWidth range.
*
* @param {Number} width The width.
* @param {Boolean} [dirty=true] Specifies if the value is currently in the DOM. A
* value of `false` indicates that the value is already in the DOM.
* @return {Number} The actual width after constraining.
*/
setWidth: function (width, dirty /*, private {Boolean} force */) {
var me = this,
comp = me.target,
ownerCtContext = me.ownerCtContext,
frameBody, frameInfo, min, oldWidth, rem;
if (width < 0) {
width = 0;
}
if (!me.wrapsComponent) {
if (!me.setProp('width', width, dirty)) {
return NaN;
}
} else {
min = me.collapsedHorz ? 0 : (comp.minWidth || 0);
width = Ext.Number.constrain(width, min, comp.maxWidth);
oldWidth = me.props.width
if (!me.setProp('width', width, dirty)) {
return NaN;
}
// if we are a container child, since the width is now known we can decrement
// the number of remainingChildDimensions that the ownerCtContext is waiting on.
if (ownerCtContext && !me.isComponentChild && isNaN(oldWidth)) {
rem = --ownerCtContext.remainingChildDimensions;
if (!rem) {
// if there are 0 remainingChildDimensions set containerChildrenSizeDone
// on the ownerCtContext to indicate that all of its children's dimensions
// are known
ownerCtContext.setProp('containerChildrenSizeDone', true);
}
}
//if ((frameBody = me.target.frameBody) && (frameBody = me.getEl(frameBody))){
frameBody = me.frameBodyContext;
if (frameBody) {
frameInfo = me.getFrameInfo();
frameBody.setWidth(width - frameInfo.width, dirty);
}
/*if (owner.frameMC) {
frameContext = ownerContext.frameContext ||
(ownerContext.frameContext = ownerContext.getEl('frameMC'));
width += (frameContext.paddingInfo || frameContext.getPaddingInfo()).width;
}*/
}
return width;
},
setSize: function (width, height, dirty) {
this.setWidth(width, dirty);
this.setHeight(height, dirty);
},
translateProps: {
x: 'left',
y: 'top'
},
undo: function(deep) {
var me = this,
items, len, i;
me.revertProps(me.lastBox);
if (deep && me.wrapsComponent) {
// Rollback the state of child Components
if (me.childItems) {
for (i = 0, items = me.childItems, len = items.length; i < len; i++) {
items[i].undo(deep);
}
}
// Rollback the state of child Elements
for (i = 0, items = me.children, len = items.length; i < len; i++) {
items[i].undo();
}
}
},
unsetProp: function (propName) {
var dirty = this.dirty;
delete this.props[propName];
if (dirty) {
delete dirty[propName];
}
},
writeProps: function(dirtyProps, flushing) {
if (!(dirtyProps && typeof dirtyProps == 'object')) {
//<debug warn>
Ext.Logger.warn('writeProps expected dirtyProps to be an object');
//</debug>
return;
}
var me = this,
el = me.el,
styles = {},
styleCount = 0, // used as a boolean, the exact count doesn't matter
styleInfo = me.styleInfo,
info,
propName,
numericValue,
width = dirtyProps.width,
height = dirtyProps.height,
isBorderBox = me.isBorderBoxValue,
target = me.target,
max = Math.max,
paddingWidth = 0,
paddingHeight = 0,
hasWidth, hasHeight, isAbsolute, scrollbarSize, style, targetEl;
// Process non-style properties:
if ('displayed' in dirtyProps) {
el.setDisplayed(dirtyProps.displayed);
}
// Unblock any hard blocks (domBlocks) and copy dom styles into 'styles'
for (propName in dirtyProps) {
if (flushing) {
me.fireTriggers('domTriggers', propName);
me.clearBlocks('domBlocks', propName);
me.flushedProps[propName] = 1;
}
info = styleInfo[propName];
if (info && info.dom) {
// Numeric dirty values should have their associated suffix added
if (info.suffix && (numericValue = parseInt(dirtyProps[propName], 10))) {
styles[propName] = numericValue + info.suffix;
}
// Non-numeric (eg "auto") go in unchanged.
else {
styles[propName] = dirtyProps[propName];
}
++styleCount;
}
}
// convert x/y into setPosition (for a component) or left/top styles (for an el)
if ('x' in dirtyProps || 'y' in dirtyProps) {
if (target.isComponent) {
target.setPosition(dirtyProps.x, dirtyProps.y);
} else {
// we wrap an element, so convert x/y to styles:
styleCount += me.addPositionStyles(styles, dirtyProps);
}
}
// Support for the content-box box model...
if (!isBorderBox && (width > 0 || height > 0)) { // no need to subtract from 0
// The width and height values assume the border-box box model,
// so we must remove the padding & border to calculate the content-box.
//<debug>
if (!(me.borderInfo && me.paddingInfo)) {
throw Error("Needed to have gotten the borderInfo and paddingInfo when the width or height was setProp'd");
}
//</debug>
if(!me.frameBodyContext) {
// Padding needs to be removed only if the element is not framed.
paddingWidth = me.paddingInfo.width;
paddingHeight = me.paddingInfo.height;
}
if (width) {
width = max(parseInt(width, 10) - (me.borderInfo.width + paddingWidth), 0);
styles.width = width + 'px';
++styleCount;
}
if (height) {
height = max(parseInt(height, 10) - (me.borderInfo.height + paddingHeight), 0);
styles.height = height + 'px';
++styleCount;
}
}
// IE9 strict subtracts the scrollbar size from the element size when the element
// is absolutely positioned and uses box-sizing: border-box. To workaround this
// issue we have to add the the scrollbar size.
//
// See http://social.msdn.microsoft.com/Forums/da-DK/iewebdevelopment/thread/47c5148f-a142-4a99-9542-5f230c78cb3b
//
if (me.wrapsComponent && Ext.isIE9 && Ext.isStrict) {
// when we set a width and we have a vertical scrollbar (overflowY), we need
// to add the scrollbar width... conversely for the height and overflowX
if ((hasWidth = width !== undefined && me.hasOverflowY) ||
(hasHeight = height !== undefined && me.hasOverflowX)) {
// check that the component is absolute positioned and border-box:
isAbsolute = me.isAbsolute;
if (isAbsolute === undefined) {
isAbsolute = false;
targetEl = me.target.getTargetEl();
style = targetEl.getStyle('position');
if (style == 'absolute') {
style = targetEl.getStyle('box-sizing');
isAbsolute = (style == 'border-box');
}
me.isAbsolute = isAbsolute; // cache it
}
if (isAbsolute) {
scrollbarSize = Ext.getScrollbarSize();
if (hasWidth) {
width = parseInt(width, 10) + scrollbarSize.width;
styles.width = width + 'px';
++styleCount;
}
if (hasHeight) {
height = parseInt(height, 10) + scrollbarSize.height;
styles.height = height + 'px';
++styleCount;
}
}
}
}
// we make only one call to setStyle to allow it to optimize itself:
if (styleCount) {
el.setStyle(styles);
}
}
}, function () {
var px = { dom: true, parseInt: true, suffix: 'px' },
isDom = { dom: true },
faux = { dom: false };
// If a property exists in styleInfo, it participates in some way with the DOM. It may
// be virtualized (like 'x' and y') and be indirect, but still requires a flush cycle
// to reach the DOM. Properties (like 'contentWidth' and 'contentHeight') have no real
// presence in the DOM and hence have no flush intanglements.
//
// For simple styles, the object value on the right contains properties that help in
// decoding values read by getStyle and preparing values to pass to setStyle.
//
this.prototype.styleInfo = {
containerChildrenSizeDone: faux,
containerLayoutDone: faux,
displayed: faux,
done: faux,
x: faux,
y: faux,
// For Ext.grid.ColumnLayout
columnWidthsDone: faux,
left: px,
top: px,
right: px,
bottom: px,
width: px,
height: px,
'border-top-width': px,
'border-right-width': px,
'border-bottom-width': px,
'border-left-width': px,
'margin-top': px,
'margin-right': px,
'margin-bottom': px,
'margin-left': px,
'padding-top': px,
'padding-right': px,
'padding-bottom': px,
'padding-left': px,
'line-height': isDom,
display: isDom
};
});
|
Download
