Upgrade to ExtJS 3.3.1 - Released 11/30/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.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.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 handleWidth = 5,
53             x = e.getPageX(),
54             header = e.getTarget('em', 3, true);
55         if(header){
56             var region = header.getRegion(),
57                 style = header.dom.style,
58                 parentNode = header.dom.parentNode;
59
60             if(x - region.left <= handleWidth && parentNode != parentNode.parentNode.firstChild){
61                 this.activeHd = Ext.get(parentNode.previousSibling.firstChild);
62                 style.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
63             } else if(region.right - x <= handleWidth && parentNode != parentNode.parentNode.lastChild.previousSibling){
64                 this.activeHd = header;
65                 style.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
66             } else{
67                 delete this.activeHd;
68                 style.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         
80         var me = this,
81             view = me.view,
82             dragHeader = me.dragHd,
83             x = me.tracker.getXY()[0];            
84         
85         me.proxy = view.el.createChild({cls:'x-list-resizer'});
86         me.dragX = dragHeader.getX();
87         me.headerIndex = view.findHeaderIndex(dragHeader);
88         
89         me.headersDisabled = view.disableHeaders;
90         view.disableHeaders = true;
91         
92         me.proxy.setHeight(view.el.getHeight());
93         me.proxy.setX(me.dragX);
94         me.proxy.setWidth(x - me.dragX);
95         
96         this.setBoundaries();
97         
98     },
99     
100     // Sets up the boundaries for the drag/drop operation
101     setBoundaries: function(relativeX){
102         var view = this.view,
103             headerIndex = this.headerIndex,
104             width = view.innerHd.getWidth(),
105             relativeX = view.innerHd.getX(),
106             minWidth = Math.ceil(width * this.minPct),
107             maxWidth = width - minWidth,
108             numColumns = view.columns.length,
109             headers = view.innerHd.select('em', true),
110             minX = minWidth + relativeX,
111             maxX = maxWidth + relativeX,
112             header;
113           
114         if (numColumns == 2) {
115             this.minX = minX;
116             this.maxX = maxX;
117         }else{
118             header = headers.item(headerIndex + 2);
119             this.minX = headers.item(headerIndex).getX() + minWidth;
120             this.maxX = header ? header.getX() - minWidth : maxX;
121             if (headerIndex == 0) {
122                 // First
123                 this.minX = minX;
124             } else if (headerIndex == numColumns - 2) {
125                 // Last
126                 this.maxX = maxX;
127             }
128         }
129     },
130
131     onDrag: function(e){
132         var me = this,
133             cursorX = me.tracker.getXY()[0].constrain(me.minX, me.maxX);
134             
135         me.proxy.setWidth(cursorX - this.dragX);
136     },
137
138     onEnd: function(e){
139         /* calculate desired width by measuring proxy and then remove it */
140         var newWidth = this.proxy.getWidth(),
141             index = this.headerIndex,
142             view = this.view,
143             columns = view.columns,
144             width = view.innerHd.getWidth(),
145             newPercent = Math.ceil(newWidth * view.maxColumnWidth / width) / 100,
146             disabled = this.headersDisabled,
147             headerCol = columns[index],
148             otherCol = columns[index + 1],
149             totalPercent = headerCol.width + otherCol.width;
150
151         this.proxy.remove();
152
153         headerCol.width = newPercent;
154         otherCol.width = totalPercent - newPercent;
155       
156         delete this.dragHd;
157         view.setHdWidths();
158         view.refresh();
159         
160         setTimeout(function(){
161             view.disableHeaders = disabled;
162         }, 100);
163     }
164 });
165
166 // Backwards compatibility alias
167 Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;</pre>    
168 </body>
169 </html>