Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / ColumnResizer.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.1
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.list.ColumnResizer"></div>/**
16  * @class Ext.list.ColumnResizer
17  * @extends Ext.util.Observable
18  * <p>Supporting Class for Ext.list.ListView</p>
19  * @constructor
20  * @param {Object} config
21  */
22 Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
23     <div id="cfg-Ext.list.ColumnResizer-minPct"></div>/**
24      * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)
25      */
26     minPct: .05,
27
28     constructor: function(config){
29         Ext.apply(this, config);
30         Ext.list.ColumnResizer.superclass.constructor.call(this);
31     },
32     init : function(listView){
33         this.view = listView;
34         listView.on('render', this.initEvents, this);
35     },
36
37     initEvents : function(view){
38         view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
39         this.tracker = new Ext.dd.DragTracker({
40             onBeforeStart: this.onBeforeStart.createDelegate(this),
41             onStart: this.onStart.createDelegate(this),
42             onDrag: this.onDrag.createDelegate(this),
43             onEnd: this.onEnd.createDelegate(this),
44             tolerance: 3,
45             autoStart: 300
46         });
47         this.tracker.initEl(view.innerHd);
48         view.on('beforedestroy', this.tracker.destroy, this.tracker);
49     },
50
51     handleHdMove : function(e, t){
52         var hw = 5,
53             x = e.getPageX(),
54             hd = e.getTarget('em', 3, true);
55         if(hd){
56             var r = hd.getRegion(),
57                 ss = hd.dom.style,
58                 pn = hd.dom.parentNode;
59
60             if(x - r.left <= hw && pn != pn.parentNode.firstChild){
61                 this.activeHd = Ext.get(pn.previousSibling.firstChild);
62                 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
63             } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
64                 this.activeHd = hd;
65                 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
66             } else{
67                 delete this.activeHd;
68                 ss.cursor = '';
69             }
70         }
71     },
72
73     onBeforeStart : function(e){
74         this.dragHd = this.activeHd;
75         return !!this.dragHd;
76     },
77
78     onStart: function(e){
79         this.view.disableHeaders = true;
80         this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
81         this.proxy.setHeight(this.view.el.getHeight());
82
83         var x = this.tracker.getXY()[0],
84             w = this.view.innerHd.getWidth();
85
86         this.hdX = this.dragHd.getX();
87         this.hdIndex = this.view.findHeaderIndex(this.dragHd);
88
89         this.proxy.setX(this.hdX);
90         this.proxy.setWidth(x-this.hdX);
91
92         this.minWidth = w*this.minPct;
93         this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
94     },
95
96     onDrag: function(e){
97         var cursorX = this.tracker.getXY()[0];
98         this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
99     },
100
101     onEnd: function(e){
102         /* calculate desired width by measuring proxy and then remove it */
103         var nw = this.proxy.getWidth();
104         this.proxy.remove();
105
106         var index = this.hdIndex,
107             vw = this.view,
108             cs = vw.columns,
109             len = cs.length,
110             w = this.view.innerHd.getWidth(),
111             minPct = this.minPct * 100,
112             pct = Math.ceil((nw * vw.maxWidth) / w),
113             diff = (cs[index].width * 100) - pct,
114             eachItem = Math.floor(diff / (len-1-index)),
115             mod = diff - (eachItem * (len-1-index));
116
117         for(var i = index+1; i < len; i++){
118             var cw = (cs[i].width * 100) + eachItem,
119                 ncw = Math.max(minPct, cw);
120             if(cw != ncw){
121                 mod += cw - ncw;
122             }
123             cs[i].width = ncw / 100;
124         }
125         cs[index].width = pct / 100;
126         cs[index+1].width += (mod / 100);
127         delete this.dragHd;
128         vw.setHdWidths();
129         vw.refresh();
130         setTimeout(function(){
131             vw.disableHeaders = false;
132         }, 100);
133     }
134 });
135
136 // Backwards compatibility alias
137 Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;</pre>    
138 </body>
139 </html>