<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
- <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <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>
<span id='Ext-layout-component-AbstractDock-property-autoSizing'> /**
</span> * @private
* @property autoSizing
- * @type boolean
+ * @type Boolean
* This flag is set to indicate this layout may have an autoHeight/autoWidth.
*/
autoSizing: true,
<span id='Ext-layout-component-AbstractDock-method-onLayout'> /**
</span> * @protected
* @param {Ext.Component} owner The Panel that owns this DockLayout
- * @param {Ext.core.Element} target The target in which we are going to render the docked items
+ * @param {Ext.Element} target The target in which we are going to render the docked items
* @param {Array} args The arguments passed to the ComponentLayout.layout method
*/
onLayout: function(width, height) {
+ if (this.onLayout_running) {
+ return;
+ }
+ this.onLayout_running = true;
var me = this,
owner = me.owner,
body = owner.body,
},
bodyBox: {}
};
+ // Clear isAutoDock flag
+ delete layout.isAutoDock;
Ext.applyIf(info, me.getTargetInfo());
}
// Determine if we have an autoHeight or autoWidth.
- if (height === undefined || height === null || width === undefined || width === null) {
+ if (height == null || width == null) {
padding = info.padding;
border = info.border;
frameSize = me.frameSize;
// Auto-everything, clear out any style height/width and read from css
- if ((height === undefined || height === null) && (width === undefined || width === null)) {
+ if ((height == null) && (width == null)) {
autoHeight = true;
autoWidth = true;
me.setTargetSize(null);
me.setBodyBox({width: null, height: null});
}
// Auto-height
- else if (height === undefined || height === null) {
+ else if (height == null) {
autoHeight = true;
// Clear any sizing that we already set in a previous layout
me.setTargetSize(width);
if (layout && layout.isLayout) {
// Auto-Sized so have the container layout notify the component layout.
layout.bindToOwnerCtComponent = true;
+ // Set flag so we don't do a redundant container layout
+ layout.isAutoDock = layout.autoSize !== true;
layout.layout();
// If this is an autosized container layout, then we must compensate for a
// to fit the dock items in. This is valid because the target container is
// suppose to be autosized to fit everything accordingly.
info.autoSizedCtLayout = layout.autoSize === true;
+ info.autoHeight = autoHeight;
+ info.autoWidth = autoWidth;
}
// The dockItems method will add all the top and bottom docked items height
// we dock all the items to actually set the panel's width and height.
// We have to do this because the panel body and docked items will be position
// absolute which doesn't stretch the panel.
- me.dockItems(autoWidth, autoHeight);
+ me.dockItems();
me.setTargetSize(info.size.width, info.size.height);
}
else {
me.dockItems();
}
me.callParent(arguments);
+ this.onLayout_running = false;
},
<span id='Ext-layout-component-AbstractDock-method-dockItems'> /**
* @param {Boolean} autoBoxes Set this to true if the Panel is part of an
* AutoContainerLayout
*/
- dockItems : function(autoWidth, autoHeight) {
- this.calculateDockBoxes(autoWidth, autoHeight);
+ dockItems : function() {
+ this.calculateDockBoxes();
// Both calculateAutoBoxes and calculateSizedBoxes are changing the
// information about the body, panel size, and boxes for docked items
// inside a property called info.
var info = this.info,
+ autoWidth = info.autoWidth,
+ autoHeight = info.autoHeight,
boxes = info.boxes,
ln = boxes.length,
- dock, i;
+ dock, i, item;
// We are going to loop over all the boxes that were calculated
// and set the position of each item the box belongs to.
for (i = 0; i < ln; i++) {
dock = boxes[i];
- dock.item.setPosition(dock.x, dock.y);
- if ((autoWidth || autoHeight) && dock.layout && dock.layout.isLayout) {
+ item = dock.item;
+ item.setPosition(dock.x, dock.y);
+ if ((autoWidth || autoHeight) && item.layout && item.layout.isLayout) {
// Auto-Sized so have the container layout notify the component layout.
- dock.layout.bindToOwnerCtComponent = true;
+ item.layout.bindToOwnerCtComponent = true;
}
}
* dock position and all calculations involved with adjusting the body box.
* @param {Array} items Array containing all the docked items we have to layout
*/
- calculateDockBoxes : function(autoWidth, autoHeight) {
+ calculateDockBoxes : function() {
+ if (this.calculateDockBoxes_running) {
+ // [AbstractDock#calculateDockBoxes] attempted to run again while it was already running
+ return;
+ }
+ this.calculateDockBoxes_running = true;
// We want to use the Panel's el width, and the Panel's body height as the initial
// size we are going to use in calculateDockBoxes. We also want to account for
// the border of the panel.
owner = me.owner,
bodyEl = owner.body,
info = me.info,
+ autoWidth = info.autoWidth,
+ autoHeight = info.autoHeight,
size = info.size,
ln = items.length,
padding = info.padding,
// all the docked items that have changed.
info.boxes.push(box);
}
+ this.calculateDockBoxes_running = false;
},
<span id='Ext-layout-component-AbstractDock-method-adjustSizedBox'> /**
*/
adjustAutoBox : function (box, index) {
var info = this.info,
+ owner = this.owner,
bodyBox = info.bodyBox,
size = info.size,
boxes = info.boxes,
box.y = bodyBox.y;
if (!box.overlay) {
bodyBox.y += box.height;
+ if (info.autoHeight) {
+ size.height += box.height;
+ } else {
+ bodyBox.height -= box.height;
+ }
}
- size.height += box.height;
break;
case 'bottom':
+ if (!box.overlay) {
+ if (info.autoHeight) {
+ size.height += box.height;
+ } else {
+ bodyBox.height -= box.height;
+ }
+ }
box.y = (bodyBox.y + bodyBox.height);
- size.height += box.height;
break;
case 'left':
box.x = bodyBox.x;
if (!box.overlay) {
bodyBox.x += box.width;
- if (autoSizedCtLayout) {
+ if (info.autoWidth) {
size.width += box.width;
} else {
bodyBox.width -= box.width;
case 'right':
if (!box.overlay) {
- if (autoSizedCtLayout) {
+ if (info.autoWidth) {
size.width += box.width;
} else {
bodyBox.width -= box.width;
item: item,
overlay: item.overlay,
type: item.dock,
- offsets: Ext.core.Element.parseBox(item.offsets || {}),
+ offsets: Ext.Element.parseBox(item.offsets || {}),
ignoreFrame: item.ignoreParentFrame
};
// First we are going to take care of stretch and align properties for all four dock scenarios.
// If we haven't calculated the width or height of the docked item yet
// do so, since we need this for our upcoming calculations
- if (box.width == undefined) {
+ if (box.width === undefined) {
box.width = item.getWidth() + item.el.getMargin('lr');
}
- if (box.height == undefined) {
+ if (box.height === undefined) {
box.height = item.getHeight() + item.el.getMargin('tb');
}
cn = Ext.get(cns[i]);
for (j = 0; j < ln; j++) {
item = items[j];
- if (item.rendered && (cn.id == item.el.id || cn.down('#' + item.el.id))) {
+ if (item.rendered && (cn.id == item.el.id || cn.contains(item.el.id))) {
break;
}
}
*/
configureItem : function(item, pos) {
this.callParent(arguments);
+ if (item.dock == 'top' || item.dock == 'bottom') {
+ item.layoutManagedWidth = 1;
+ item.layoutManagedHeight = 2;
+ } else {
+ item.layoutManagedWidth = 2;
+ item.layoutManagedHeight = 1;
+ }
item.addCls(Ext.baseCSSPrefix + 'docked');
item.addClsWithUI('docked-' + item.dock);
git.ithinksw.org / extjs.git / blobdiff