3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js"><div id="cls-Ext.ListView.ColumnResizer"></div>/**
\r
9 * @class Ext.ListView.ColumnResizer
\r
10 * @extends Ext.util.Observable
\r
11 * <p>Supporting Class for Ext.ListView.</p>
\r
13 * @param {Object} config
\r
15 Ext.ListView.ColumnResizer = Ext.extend(Ext.util.Observable, {
\r
16 <div id="cfg-Ext.ListView.ColumnResizer-minPct"></div>/**
\r
17 * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)
\r
21 constructor: function(config){
\r
22 Ext.apply(this, config);
\r
23 Ext.ListView.ColumnResizer.superclass.constructor.call(this);
\r
25 init : function(listView){
\r
26 this.view = listView;
\r
27 listView.on('render', this.initEvents, this);
\r
30 initEvents : function(view){
\r
31 view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
\r
32 this.tracker = new Ext.dd.DragTracker({
\r
33 onBeforeStart: this.onBeforeStart.createDelegate(this),
\r
34 onStart: this.onStart.createDelegate(this),
\r
35 onDrag: this.onDrag.createDelegate(this),
\r
36 onEnd: this.onEnd.createDelegate(this),
\r
40 this.tracker.initEl(view.innerHd);
\r
41 view.on('beforedestroy', this.tracker.destroy, this.tracker);
\r
44 handleHdMove : function(e, t){
\r
46 var x = e.getPageX();
\r
47 var hd = e.getTarget('em', 3, true);
\r
49 var r = hd.getRegion();
\r
50 var ss = hd.dom.style;
\r
51 var pn = hd.dom.parentNode;
\r
53 if(x - r.left <= hw && pn != pn.parentNode.firstChild){
\r
54 this.activeHd = Ext.get(pn.previousSibling.firstChild);
\r
55 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
\r
56 } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
\r
58 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
\r
60 delete this.activeHd;
\r
66 onBeforeStart : function(e){
\r
67 this.dragHd = this.activeHd;
\r
68 return !!this.dragHd;
\r
71 onStart: function(e){
\r
72 this.view.disableHeaders = true;
\r
73 this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
\r
74 this.proxy.setHeight(this.view.el.getHeight());
\r
76 var x = this.tracker.getXY()[0];
\r
77 var w = this.view.innerHd.getWidth();
\r
79 this.hdX = this.dragHd.getX();
\r
80 this.hdIndex = this.view.findHeaderIndex(this.dragHd);
\r
82 this.proxy.setX(this.hdX);
\r
83 this.proxy.setWidth(x-this.hdX);
\r
85 this.minWidth = w*this.minPct;
\r
86 this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
\r
89 onDrag: function(e){
\r
90 var cursorX = this.tracker.getXY()[0];
\r
91 this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
\r
95 var nw = this.proxy.getWidth();
\r
96 this.proxy.remove();
\r
98 var index = this.hdIndex;
\r
99 var vw = this.view, cs = vw.columns, len = cs.length;
\r
100 var w = this.view.innerHd.getWidth(), minPct = this.minPct * 100;
\r
102 var pct = Math.ceil((nw*100) / w);
\r
103 var diff = cs[index].width - pct;
\r
104 var each = Math.floor(diff / (len-1-index));
\r
105 var mod = diff - (each * (len-1-index));
\r
107 for(var i = index+1; i < len; i++){
\r
108 var cw = cs[i].width + each;
\r
109 var ncw = Math.max(minPct, cw);
\r
115 cs[index].width = pct;
\r
116 cs[index+1].width += mod;
\r
117 delete this.dragHd;
\r
118 this.view.setHdWidths();
\r
119 this.view.refresh();
\r
120 setTimeout(function(){
\r
121 vw.disableHeaders = false;
\r