172 lines
6.3 KiB
HTML
172 lines
6.3 KiB
HTML
<!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-list-ColumnResizer-method-constructor'><span id='Ext-list-ColumnResizer'>/**
|
|
</span></span> * @class Ext.list.ColumnResizer
|
|
* @extends Ext.util.Observable
|
|
* <p>Supporting Class for Ext.list.ListView</p>
|
|
* @constructor
|
|
* @param {Object} config
|
|
*/
|
|
Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
|
|
<span id='Ext-list-ColumnResizer-cfg-minPct'> /**
|
|
</span> * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)
|
|
*/
|
|
minPct: .05,
|
|
|
|
constructor: function(config){
|
|
Ext.apply(this, config);
|
|
Ext.list.ColumnResizer.superclass.constructor.call(this);
|
|
},
|
|
<span id='Ext-list-ColumnResizer-method-init'> init : function(listView){
|
|
</span> this.view = listView;
|
|
listView.on('render', this.initEvents, this);
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-initEvents'> initEvents : function(view){
|
|
</span> view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
|
|
this.tracker = new Ext.dd.DragTracker({
|
|
onBeforeStart: this.onBeforeStart.createDelegate(this),
|
|
onStart: this.onStart.createDelegate(this),
|
|
onDrag: this.onDrag.createDelegate(this),
|
|
onEnd: this.onEnd.createDelegate(this),
|
|
tolerance: 3,
|
|
autoStart: 300
|
|
});
|
|
this.tracker.initEl(view.innerHd);
|
|
view.on('beforedestroy', this.tracker.destroy, this.tracker);
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-handleHdMove'> handleHdMove : function(e, t){
|
|
</span> var handleWidth = 5,
|
|
x = e.getPageX(),
|
|
header = e.getTarget('em', 3, true);
|
|
if(header){
|
|
var region = header.getRegion(),
|
|
style = header.dom.style,
|
|
parentNode = header.dom.parentNode;
|
|
|
|
if(x - region.left <= handleWidth && parentNode != parentNode.parentNode.firstChild){
|
|
this.activeHd = Ext.get(parentNode.previousSibling.firstChild);
|
|
style.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
|
|
} else if(region.right - x <= handleWidth && parentNode != parentNode.parentNode.lastChild.previousSibling){
|
|
this.activeHd = header;
|
|
style.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
|
|
} else{
|
|
delete this.activeHd;
|
|
style.cursor = '';
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-onBeforeStart'> onBeforeStart : function(e){
|
|
</span> this.dragHd = this.activeHd;
|
|
return !!this.dragHd;
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-onStart'> onStart: function(e){
|
|
</span>
|
|
var me = this,
|
|
view = me.view,
|
|
dragHeader = me.dragHd,
|
|
x = me.tracker.getXY()[0];
|
|
|
|
me.proxy = view.el.createChild({cls:'x-list-resizer'});
|
|
me.dragX = dragHeader.getX();
|
|
me.headerIndex = view.findHeaderIndex(dragHeader);
|
|
|
|
me.headersDisabled = view.disableHeaders;
|
|
view.disableHeaders = true;
|
|
|
|
me.proxy.setHeight(view.el.getHeight());
|
|
me.proxy.setX(me.dragX);
|
|
me.proxy.setWidth(x - me.dragX);
|
|
|
|
this.setBoundaries();
|
|
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-setBoundaries'> // Sets up the boundaries for the drag/drop operation
|
|
</span> setBoundaries: function(relativeX){
|
|
var view = this.view,
|
|
headerIndex = this.headerIndex,
|
|
width = view.innerHd.getWidth(),
|
|
relativeX = view.innerHd.getX(),
|
|
minWidth = Math.ceil(width * this.minPct),
|
|
maxWidth = width - minWidth,
|
|
numColumns = view.columns.length,
|
|
headers = view.innerHd.select('em', true),
|
|
minX = minWidth + relativeX,
|
|
maxX = maxWidth + relativeX,
|
|
header;
|
|
|
|
if (numColumns == 2) {
|
|
this.minX = minX;
|
|
this.maxX = maxX;
|
|
}else{
|
|
header = headers.item(headerIndex + 2);
|
|
this.minX = headers.item(headerIndex).getX() + minWidth;
|
|
this.maxX = header ? header.getX() - minWidth : maxX;
|
|
if (headerIndex == 0) {
|
|
// First
|
|
this.minX = minX;
|
|
} else if (headerIndex == numColumns - 2) {
|
|
// Last
|
|
this.maxX = maxX;
|
|
}
|
|
}
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-onDrag'> onDrag: function(e){
|
|
</span> var me = this,
|
|
cursorX = me.tracker.getXY()[0].constrain(me.minX, me.maxX);
|
|
|
|
me.proxy.setWidth(cursorX - this.dragX);
|
|
},
|
|
|
|
<span id='Ext-list-ColumnResizer-method-onEnd'> onEnd: function(e){
|
|
</span> /* calculate desired width by measuring proxy and then remove it */
|
|
var newWidth = this.proxy.getWidth(),
|
|
index = this.headerIndex,
|
|
view = this.view,
|
|
columns = view.columns,
|
|
width = view.innerHd.getWidth(),
|
|
newPercent = Math.ceil(newWidth * view.maxColumnWidth / width) / 100,
|
|
disabled = this.headersDisabled,
|
|
headerCol = columns[index],
|
|
otherCol = columns[index + 1],
|
|
totalPercent = headerCol.width + otherCol.width;
|
|
|
|
this.proxy.remove();
|
|
|
|
headerCol.width = newPercent;
|
|
otherCol.width = totalPercent - newPercent;
|
|
|
|
delete this.dragHd;
|
|
view.setHdWidths();
|
|
view.refresh();
|
|
|
|
setTimeout(function(){
|
|
view.disableHeaders = disabled;
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
// Backwards compatibility alias
|
|
Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;</pre>
|
|
</body>
|
|
</html>
|