<!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-resizer-SplitterTracker'>/**
|
</span> * Private utility class for Ext.Splitter.
|
* @private
|
*/
|
Ext.define('Ext.resizer.SplitterTracker', {
|
extend: 'Ext.dd.DragTracker',
|
requires: ['Ext.util.Region'],
|
<span id='Ext-resizer-SplitterTracker-property-enabled'> enabled: true,
|
</span>
|
<span id='Ext-resizer-SplitterTracker-property-overlayCls'> overlayCls: Ext.baseCSSPrefix + 'resizable-overlay',
|
</span>
|
<span id='Ext-resizer-SplitterTracker-method-createDragOverlay'> createDragOverlay: function () {
|
</span> var overlay;
|
|
overlay = this.overlay = Ext.getBody().createChild({
|
cls: this.overlayCls,
|
html: '&#160;'
|
});
|
|
overlay.unselectable();
|
overlay.setSize(Ext.Element.getViewWidth(true), Ext.Element.getViewHeight(true));
|
overlay.show();
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getPrevCmp'> getPrevCmp: function() {
|
</span> var splitter = this.getSplitter();
|
return splitter.previousSibling(':not([hidden])');
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getNextCmp'> getNextCmp: function() {
|
</span> var splitter = this.getSplitter();
|
return splitter.nextSibling(':not([hidden])');
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-onBeforeStart'> // ensure the tracker is enabled, store boxes of previous and next
|
</span> // components and calculate the constrain region
|
onBeforeStart: function(e) {
|
var me = this,
|
prevCmp = me.getPrevCmp(),
|
nextCmp = me.getNextCmp(),
|
collapseEl = me.getSplitter().collapseEl,
|
target = e.getTarget(),
|
box;
|
|
if (!prevCmp || !nextCmp) {
|
return false;
|
}
|
|
if (collapseEl && target === me.getSplitter().collapseEl.dom) {
|
return false;
|
}
|
|
// SplitterTracker is disabled if any of its adjacents are collapsed.
|
if (nextCmp.collapsed || prevCmp.collapsed) {
|
return false;
|
}
|
|
// store boxes of previous and next
|
me.prevBox = prevCmp.getEl().getBox();
|
me.nextBox = nextCmp.getEl().getBox();
|
me.constrainTo = box = me.calculateConstrainRegion();
|
|
if (!box) {
|
return false;
|
}
|
|
return box;
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-onStart'> // We move the splitter el. Add the proxy class.
|
</span> onStart: function(e) {
|
var splitter = this.getSplitter();
|
this.createDragOverlay();
|
splitter.addCls(splitter.baseCls + '-active');
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-calculateConstrainRegion'> // calculate the constrain Region in which the splitter el may be moved.
|
</span> calculateConstrainRegion: function() {
|
var me = this,
|
splitter = me.getSplitter(),
|
splitWidth = splitter.getWidth(),
|
defaultMin = splitter.defaultSplitMin,
|
orient = splitter.orientation,
|
prevBox = me.prevBox,
|
prevCmp = me.getPrevCmp(),
|
nextBox = me.nextBox,
|
nextCmp = me.getNextCmp(),
|
// prev and nextConstrainRegions are the maximumBoxes minus the
|
// minimumBoxes. The result is always the intersection
|
// of these two boxes.
|
prevConstrainRegion, nextConstrainRegion, constrainOptions;
|
|
// vertical splitters, so resizing left to right
|
if (orient === 'vertical') {
|
constrainOptions = {
|
prevCmp: prevCmp,
|
nextCmp: nextCmp,
|
prevBox: prevBox,
|
nextBox: nextBox,
|
defaultMin: defaultMin,
|
splitWidth: splitWidth
|
};
|
// Region constructor accepts (top, right, bottom, left)
|
// anchored/calculated from the left
|
prevConstrainRegion = new Ext.util.Region(
|
prevBox.y,
|
me.getVertPrevConstrainRight(constrainOptions),
|
prevBox.bottom,
|
me.getVertPrevConstrainLeft(constrainOptions)
|
);
|
// anchored/calculated from the right
|
nextConstrainRegion = new Ext.util.Region(
|
nextBox.y,
|
me.getVertNextConstrainRight(constrainOptions),
|
nextBox.bottom,
|
me.getVertNextConstrainLeft(constrainOptions)
|
);
|
} else {
|
// anchored/calculated from the top
|
prevConstrainRegion = new Ext.util.Region(
|
prevBox.y + (prevCmp.minHeight || defaultMin),
|
prevBox.right,
|
// Bottom boundary is y + maxHeight if there IS a maxHeight.
|
// Otherwise it is calculated based upon the minWidth of the next Component
|
(prevCmp.maxHeight ? prevBox.y + prevCmp.maxHeight : nextBox.bottom - (nextCmp.minHeight || defaultMin)) + splitWidth,
|
prevBox.x
|
);
|
// anchored/calculated from the bottom
|
nextConstrainRegion = new Ext.util.Region(
|
// Top boundary is bottom - maxHeight if there IS a maxHeight.
|
// Otherwise it is calculated based upon the minHeight of the previous Component
|
(nextCmp.maxHeight ? nextBox.bottom - nextCmp.maxHeight : prevBox.y + (prevCmp.minHeight || defaultMin)) - splitWidth,
|
nextBox.right,
|
nextBox.bottom - (nextCmp.minHeight || defaultMin),
|
nextBox.x
|
);
|
}
|
|
// intersection of the two regions to provide region draggable
|
return prevConstrainRegion.intersect(nextConstrainRegion);
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-performResize'> // Performs the actual resizing of the previous and next components
|
</span> performResize: function(e, offset) {
|
var me = this,
|
splitter = me.getSplitter(),
|
orient = splitter.orientation,
|
prevCmp = me.getPrevCmp(),
|
nextCmp = me.getNextCmp(),
|
owner = splitter.ownerCt,
|
flexedSiblings = owner.query('>[flex]'),
|
len = flexedSiblings.length,
|
vertical = orient === 'vertical',
|
i = 0,
|
dimension = vertical ? 'width' : 'height',
|
totalFlex = 0,
|
item, size;
|
|
// Convert flexes to pixel values proportional to the total pixel width of all flexes.
|
for (; i < len; i++) {
|
item = flexedSiblings[i];
|
size = vertical ? item.getWidth() : item.getHeight();
|
totalFlex += size;
|
item.flex = size;
|
}
|
|
offset = vertical ? offset[0] : offset[1];
|
|
if (prevCmp) {
|
size = me.prevBox[dimension] + offset;
|
if (prevCmp.flex) {
|
prevCmp.flex = size;
|
} else {
|
prevCmp[dimension] = size;
|
}
|
}
|
if (nextCmp) {
|
size = me.nextBox[dimension] - offset;
|
if (nextCmp.flex) {
|
nextCmp.flex = size;
|
} else {
|
nextCmp[dimension] = size;
|
}
|
}
|
|
owner.updateLayout();
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-endDrag'> // Cleans up the overlay (if we have one) and calls the base. This cannot be done in
|
</span> // onEnd, because onEnd is only called if a drag is detected but the overlay is created
|
// regardless (by onBeforeStart).
|
endDrag: function () {
|
var me = this;
|
|
if (me.overlay) {
|
me.overlay.remove();
|
delete me.overlay;
|
}
|
|
me.callParent(arguments); // this calls onEnd
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-onEnd'> // perform the resize and remove the proxy class from the splitter el
|
</span> onEnd: function(e) {
|
var me = this,
|
splitter = me.getSplitter();
|
|
splitter.removeCls(splitter.baseCls + '-active');
|
me.performResize(e, me.getResizeOffset());
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-onDrag'> // Track the proxy and set the proper XY coordinates
|
</span> // while constraining the drag
|
onDrag: function(e) {
|
var me = this,
|
offset = me.getOffset('dragTarget'),
|
splitter = me.getSplitter(),
|
splitEl = splitter.getEl(),
|
orient = splitter.orientation;
|
|
if (orient === "vertical") {
|
splitEl.setX(me.startRegion.left + offset[0]);
|
} else {
|
splitEl.setY(me.startRegion.top + offset[1]);
|
}
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getSplitter'> getSplitter: function() {
|
</span> return this.splitter;
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getVertPrevConstrainRight'> getVertPrevConstrainRight: function(o) {
|
</span> // Right boundary is x + maxWidth if there IS a maxWidth.
|
// Otherwise it is calculated based upon the minWidth of the next Component
|
return (o.prevCmp.maxWidth ? o.prevBox.x + o.prevCmp.maxWidth :
|
o.nextBox.right - (o.nextCmp.minWidth || o.defaultMin)) + o.splitWidth;
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getVertPrevConstrainLeft'> getVertPrevConstrainLeft: function(o) {
|
</span> return o.prevBox.x + (o.prevCmp.minWidth || o.defaultMin);
|
},
|
|
|
<span id='Ext-resizer-SplitterTracker-method-getVertNextConstrainRight'> getVertNextConstrainRight: function(o) {
|
</span> return o.nextBox.right - (o.nextCmp.minWidth || o.defaultMin);
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getVertNextConstrainLeft'> getVertNextConstrainLeft: function(o) {
|
</span> // Left boundary is right - maxWidth if there IS a maxWidth.
|
// Otherwise it is calculated based upon the minWidth of the previous Component
|
return (o.nextCmp.maxWidth ? o.nextBox.right - o.nextCmp.maxWidth :
|
o.prevBox.x + (o.prevBox.minWidth || o.defaultMin)) - o.splitWidth;
|
},
|
|
<span id='Ext-resizer-SplitterTracker-method-getResizeOffset'> getResizeOffset: function() {
|
</span> return this.getOffset('dragTarget');
|
}
|
});</pre>
|
</body>
|
</html>
|
