<!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-grid-ColumnLayout'>/**
|
</span> * @private
|
*
|
* This class is used only by the grid's HeaderContainer docked child.
|
*
|
* It adds the ability to shrink the vertical size of the inner container element back if a grouped
|
* column header has all its child columns dragged out, and the whole HeaderContainer needs to shrink back down.
|
*
|
* Also, after every layout, after all headers have attained their 'stretchmax' height, it goes through and calls
|
* `setPadding` on the columns so that they lay out correctly.
|
*/
|
Ext.define('Ext.grid.ColumnLayout', {
|
extend: 'Ext.layout.container.HBox',
|
alias: 'layout.gridcolumn',
|
<span id='Ext-grid-ColumnLayout-property-type'> type : 'gridcolumn',
|
</span>
|
<span id='Ext-grid-ColumnLayout-property-reserveOffset'> reserveOffset: false,
|
</span>
|
<span id='Ext-grid-ColumnLayout-property-firstHeaderCls'> firstHeaderCls: Ext.baseCSSPrefix + 'column-header-first',
|
</span><span id='Ext-grid-ColumnLayout-property-lastHeaderCls'> lastHeaderCls: Ext.baseCSSPrefix + 'column-header-last',
|
</span>
|
<span id='Ext-grid-ColumnLayout-method-initLayout'> initLayout: function() {
|
</span> if (!this.scrollbarWidth) {
|
this.self.prototype.scrollbarWidth = Ext.getScrollbarSize().width;
|
}
|
this.grid = this.owner.up('[scrollerOwner]');
|
this.callParent();
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-beginLayout'> // Collect the height of the table of data upon layout begin
|
</span> beginLayout: function (ownerContext) {
|
var me = this,
|
owner = me.owner,
|
grid = me.grid,
|
view = grid.view,
|
items = me.getVisibleItems(),
|
len = items.length,
|
firstCls = me.firstHeaderCls,
|
lastCls = me.lastHeaderCls,
|
i, item;
|
|
// If we are one side of a locking grid, then if we are on the "normal" side, we have to grab the normal view
|
// for use in determining whether to subtract scrollbar width from available width.
|
// The locked side does not have scrollbars, so it should not look at the view.
|
if (grid.lockable) {
|
if (owner.up('tablepanel') === view.normalGrid) {
|
view = view.normalGrid.getView();
|
} else {
|
view = null;
|
}
|
}
|
|
for (i = 0; i < len; i++) {
|
item = items[i];
|
|
// Keep the isLast flag correct so that the column's component layout can know whether or not
|
// it needs a right border. See ColumnComponentLayout.beginLayoutCycle
|
item.isLast = false;
|
item.removeCls([firstCls, lastCls]);
|
if (i === 0) {
|
item.addCls(firstCls);
|
}
|
|
if (i === len - 1) {
|
item.addCls(lastCls);
|
item.isLast = true;
|
}
|
}
|
|
me.callParent(arguments);
|
|
// If the owner is the grid's HeaderContainer, and the UI displays old fashioned scrollbars and there is a rendered View with data in it,
|
// collect the View context to interrogate it for overflow, and possibly invalidate it if there is overflow
|
if (!owner.isColumn && Ext.getScrollbarSize().width && !grid.collapsed && view &&
|
view.rendered && (ownerContext.viewTable = view.body.dom)) {
|
ownerContext.viewContext = ownerContext.context.getCmp(view);
|
}
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-roundFlex'> roundFlex: function(width) {
|
</span> return Math.floor(width);
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-calculate'> calculate: function(ownerContext) {
|
</span> this.callParent(arguments);
|
|
// If we have calculated the widths, then if forceFit, and there are no flexes, we cannot tell the
|
// TableLayout we are done. We will have to go through the convertWidthsToFlexes stage.
|
if (ownerContext.state.parallelDone && (!this.owner.forceFit || ownerContext.flexedItems.length)) {
|
// TODO: auto width columns aren't necessarily done here.
|
// see view.TableLayout, there is a work around for that there
|
ownerContext.setProp('columnWidthsDone', true);
|
}
|
|
// Collect the height of the data table if we need it to determine overflow
|
if (ownerContext.viewContext) {
|
ownerContext.state.tableHeight = ownerContext.viewTable.offsetHeight;
|
}
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-completeLayout'> completeLayout: function(ownerContext) {
|
</span> var me = this,
|
owner = me.owner,
|
state = ownerContext.state;
|
|
me.callParent(arguments);
|
|
// If we have not been through this already, and the owning Container is configured
|
// forceFit, is not a group column and and there is a valid width, then convert
|
// widths to flexes, and loop back.
|
if (!ownerContext.flexedItems.length && !state.flexesCalculated && owner.forceFit &&
|
|
// Recalculate based upon all columns now being flexed instead of sized.
|
// Set flag, so that we do not do this infinitely
|
me.convertWidthsToFlexes(ownerContext)) {
|
me.cacheFlexes(ownerContext);
|
ownerContext.invalidate({
|
state: {
|
flexesCalculated: true
|
}
|
});
|
} else {
|
ownerContext.setProp('columnWidthsDone', true);
|
}
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-convertWidthsToFlexes'> convertWidthsToFlexes: function(ownerContext) {
|
</span> var me = this,
|
totalWidth = 0,
|
calculated = me.sizeModels.calculated,
|
childItems, len, i, childContext, item;
|
|
childItems = ownerContext.childItems;
|
len = childItems.length;
|
|
for (i = 0; i < len; i++) {
|
childContext = childItems[i];
|
item = childContext.target;
|
|
totalWidth += childContext.props.width;
|
|
// Only allow to be flexed if it's a resizable column
|
if (!(item.fixed || item.resizable === false)) {
|
|
// For forceFit, just use allocated width as the flex value, and the proportions
|
// will end up the same whatever HeaderContainer width they are being forced into.
|
item.flex = ownerContext.childItems[i].flex = childContext.props.width;
|
item.width = null;
|
childContext.widthModel = calculated;
|
}
|
}
|
|
// Only need to loop back if the total column width is not already an exact fit
|
return totalWidth !== ownerContext.props.width;
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-getContainerSize'> /**
|
</span> * @private
|
* Local getContainerSize implementation accounts for vertical scrollbar in the view.
|
*/
|
getContainerSize: function(ownerContext) {
|
var me = this,
|
result,
|
viewContext = ownerContext.viewContext,
|
viewHeight;
|
|
// Column, NOT the main grid's HeaderContainer
|
if (me.owner.isColumn) {
|
result = me.getColumnContainerSize(ownerContext);
|
}
|
|
// This is the maingrid's HeaderContainer
|
else {
|
result = me.callParent(arguments);
|
|
// If we've collected a viewContext and we're not shrinkwrapping the height
|
// then we see if we have to narrow the width slightly to account for scrollbar
|
if (viewContext && !viewContext.heightModel.shrinkWrap &&
|
viewContext.target.componentLayout.ownerContext) { // if (its layout is running)
|
viewHeight = viewContext.getProp('height');
|
if (isNaN(viewHeight)) {
|
me.done = false;
|
} else if (ownerContext.state.tableHeight > viewHeight) {
|
result.width -= Ext.getScrollbarSize().width;
|
ownerContext.state.parallelDone = false;
|
viewContext.invalidate();
|
}
|
}
|
}
|
|
// TODO - flip the initial assumption to "we have a vscroll" to avoid the invalidate in most
|
// cases (and the expensive ones to boot)
|
|
return result;
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-getColumnContainerSize'> getColumnContainerSize : function(ownerContext) {
|
</span> var padding = ownerContext.paddingContext.getPaddingInfo(),
|
got = 0,
|
needed = 0,
|
gotWidth, gotHeight, width, height;
|
|
// In an shrinkWrap width/height case, we must not ask for any of these dimensions
|
// because they will be determined by contentWidth/Height which is calculated by
|
// this layout...
|
|
// Fit/Card layouts are able to set just the width of children, allowing child's
|
// resulting height to autosize the Container.
|
// See examples/tabs/tabs.html for an example of this.
|
|
if (!ownerContext.widthModel.shrinkWrap) {
|
++needed;
|
width = ownerContext.getProp('innerWidth');
|
gotWidth = (typeof width == 'number');
|
if (gotWidth) {
|
++got;
|
width -= padding.width;
|
if (width < 0) {
|
width = 0;
|
}
|
}
|
}
|
|
if (!ownerContext.heightModel.shrinkWrap) {
|
++needed;
|
height = ownerContext.getProp('innerHeight');
|
gotHeight = (typeof height == 'number');
|
if (gotHeight) {
|
++got;
|
height -= padding.height;
|
if (height < 0) {
|
height = 0;
|
}
|
}
|
}
|
|
return {
|
width: width,
|
height: height,
|
needed: needed,
|
got: got,
|
gotAll: got == needed,
|
gotWidth: gotWidth,
|
gotHeight: gotHeight
|
};
|
},
|
|
<span id='Ext-grid-ColumnLayout-method-publishInnerCtSize'> // FIX: when flexing we actually don't have enough space as we would
|
</span> // typically because of the scrollOffset on the GridView, must reserve this
|
publishInnerCtSize: function(ownerContext) {
|
var me = this,
|
size = ownerContext.state.boxPlan.targetSize,
|
cw = ownerContext.peek('contentWidth'),
|
view;
|
|
// Allow the other co-operating objects to know whether the columns overflow the available width.
|
me.owner.tooNarrow = ownerContext.state.boxPlan.tooNarrow;
|
|
// InnerCt MUST stretch to accommodate all columns so that left/right scrolling is enabled in the header container.
|
if ((cw != null) && !me.owner.isColumn) {
|
size.width = cw;
|
|
// innerCt must also encompass any vertical scrollbar width if there may be one
|
view = me.owner.ownerCt.view;
|
if (view.scrollFlags.y) {
|
size.width += Ext.getScrollbarSize().width;
|
}
|
}
|
|
return me.callParent(arguments);
|
}
|
});
|
</pre>
|
</body>
|
</html>
|