Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / docs / source / TreeGridColumnResizer.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.3.1
11  * Copyright(c) 2006-2010 Sencha Inc.
12  * licensing@sencha.com
13  * http://www.sencha.com/license
14  */
15 <div id="cls-Ext.tree.ColumnResizer"></div>/**
16  * @class Ext.tree.ColumnResizer
17  * @extends Ext.util.Observable
18  */
19 Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
20     <div id="cfg-Ext.tree.ColumnResizer-minWidth"></div>/**
21      * @cfg {Number} minWidth The minimum width the column can be dragged to.
22      * Defaults to <tt>14</tt>.
23      */
24     minWidth: 14,
25
26     constructor: function(config){
27         Ext.apply(this, config);
28         Ext.tree.ColumnResizer.superclass.constructor.call(this);
29     },
30
31     init : function(tree){
32         this.tree = tree;
33         tree.on('render', this.initEvents, this);
34     },
35
36     initEvents : function(tree){
37         tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
38         this.tracker = new Ext.dd.DragTracker({
39             onBeforeStart: this.onBeforeStart.createDelegate(this),
40             onStart: this.onStart.createDelegate(this),
41             onDrag: this.onDrag.createDelegate(this),
42             onEnd: this.onEnd.createDelegate(this),
43             tolerance: 3,
44             autoStart: 300
45         });
46         this.tracker.initEl(tree.innerHd);
47         tree.on('beforedestroy', this.tracker.destroy, this.tracker);
48     },
49
50     handleHdMove : function(e, t){
51         var hw = 5,
52             x = e.getPageX(),
53             hd = e.getTarget('.x-treegrid-hd', 3, true);
54         
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 && hd.dom !== pn.firstChild) {
61                 var ps = hd.dom.previousSibling;
62                 while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
63                     ps = ps.previousSibling;
64                 }
65                 if(ps) {                    
66                     this.activeHd = Ext.get(ps);
67                                 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
68                 }
69             } else if(r.right - x <= hw) {
70                 var ns = hd.dom;
71                 while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
72                     ns = ns.previousSibling;
73                 }
74                 if(ns) {
75                     this.activeHd = Ext.get(ns);
76                                 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';                    
77                 }
78             } else{
79                 delete this.activeHd;
80                 ss.cursor = '';
81             }
82         }
83     },
84
85     onBeforeStart : function(e){
86         this.dragHd = this.activeHd;
87         return !!this.dragHd;
88     },
89
90     onStart : function(e){
91         this.dragHeadersDisabled = this.tree.headersDisabled;
92         this.tree.headersDisabled = true;
93         this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
94         this.proxy.setHeight(this.tree.body.getHeight());
95
96         var x = this.tracker.getXY()[0];
97
98         this.hdX = this.dragHd.getX();
99         this.hdIndex = this.tree.findHeaderIndex(this.dragHd);
100
101         this.proxy.setX(this.hdX);
102         this.proxy.setWidth(x-this.hdX);
103
104         this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
105     },
106
107     onDrag : function(e){
108         var cursorX = this.tracker.getXY()[0];
109         this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
110     },
111
112     onEnd : function(e){
113         var nw = this.proxy.getWidth(),
114             tree = this.tree,
115             disabled = this.dragHeadersDisabled;
116         
117         this.proxy.remove();
118         delete this.dragHd;
119         
120         tree.columns[this.hdIndex].width = nw;
121         tree.updateColumnWidths();
122         
123         setTimeout(function(){
124             tree.headersDisabled = disabled;
125         }, 100);
126     }
127 });</pre>    
128 </body>
129 </html>