Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / ColumnResizer.html
index 94552fc..f55dbf7 100644 (file)
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.ListView.ColumnResizer"></div>/**\r
- * @class Ext.ListView.ColumnResizer\r
- * @extends Ext.util.Observable\r
- * <p>Supporting Class for Ext.ListView.</p>\r
- * @constructor\r
- * @param {Object} config\r
- */\r
-Ext.ListView.ColumnResizer = Ext.extend(Ext.util.Observable, {\r
-    <div id="cfg-Ext.ListView.ColumnResizer-minPct"></div>/**\r
-     * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)\r
-     */\r
-    minPct: .05,\r
-\r
-    constructor: function(config){\r
-        Ext.apply(this, config);\r
-        Ext.ListView.ColumnResizer.superclass.constructor.call(this);\r
-    },\r
-    init : function(listView){\r
-        this.view = listView;\r
-        listView.on('render', this.initEvents, this);\r
-    },\r
-\r
-    initEvents : function(view){\r
-        view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);\r
-        this.tracker = new Ext.dd.DragTracker({\r
-            onBeforeStart: this.onBeforeStart.createDelegate(this),\r
-            onStart: this.onStart.createDelegate(this),\r
-            onDrag: this.onDrag.createDelegate(this),\r
-            onEnd: this.onEnd.createDelegate(this),\r
-            tolerance: 3,\r
-            autoStart: 300\r
-        });\r
-        this.tracker.initEl(view.innerHd);\r
-        view.on('beforedestroy', this.tracker.destroy, this.tracker);\r
-    },\r
-\r
-    handleHdMove : function(e, t){\r
-        var hw = 5;\r
-        var x = e.getPageX();\r
-        var hd = e.getTarget('em', 3, true);\r
-        if(hd){\r
-            var r = hd.getRegion();\r
-            var ss = hd.dom.style;\r
-            var pn = hd.dom.parentNode;\r
-\r
-            if(x - r.left <= hw && pn != pn.parentNode.firstChild){\r
-                this.activeHd = Ext.get(pn.previousSibling.firstChild);\r
-                               ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';\r
-            } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){\r
-                this.activeHd = hd;\r
-                               ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';\r
-            } else{\r
-                delete this.activeHd;\r
-                ss.cursor = '';\r
-            }\r
-        }\r
-    },\r
-\r
-    onBeforeStart : function(e){\r
-        this.dragHd = this.activeHd;\r
-        return !!this.dragHd;\r
-    },\r
-\r
-    onStart: function(e){\r
-        this.view.disableHeaders = true;\r
-        this.proxy = this.view.el.createChild({cls:'x-list-resizer'});\r
-        this.proxy.setHeight(this.view.el.getHeight());\r
-\r
-        var x = this.tracker.getXY()[0];\r
-        var w = this.view.innerHd.getWidth();\r
-\r
-        this.hdX = this.dragHd.getX();\r
-        this.hdIndex = this.view.findHeaderIndex(this.dragHd);\r
-\r
-        this.proxy.setX(this.hdX);\r
-        this.proxy.setWidth(x-this.hdX);\r
-\r
-        this.minWidth = w*this.minPct;\r
-        this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));\r
-    },\r
-\r
-    onDrag: function(e){\r
-        var cursorX = this.tracker.getXY()[0];\r
-        this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));\r
-    },\r
-\r
-    onEnd: function(e){\r
-        var nw = this.proxy.getWidth();\r
-        this.proxy.remove();\r
-\r
-        var index = this.hdIndex;\r
-        var vw = this.view, cs = vw.columns, len = cs.length;\r
-        var w = this.view.innerHd.getWidth(), minPct = this.minPct * 100;\r
-\r
-        var pct = Math.ceil((nw*100) / w);\r
-        var diff = cs[index].width - pct;\r
-        var each = Math.floor(diff / (len-1-index));\r
-        var mod = diff - (each * (len-1-index));\r
-\r
-        for(var i = index+1; i < len; i++){\r
-            var cw = cs[i].width + each;\r
-            var ncw = Math.max(minPct, cw);\r
-            if(cw != ncw){\r
-                mod += cw - ncw;\r
-            }\r
-            cs[i].width = ncw;\r
-        }\r
-        cs[index].width = pct;\r
-        cs[index+1].width += mod;\r
-        delete this.dragHd;\r
-        this.view.setHdWidths();\r
-        this.view.refresh();\r
-        setTimeout(function(){\r
-            vw.disableHeaders = false;\r
-        }, 100);\r
-    }\r
-});</pre>    \r
-</body>\r
+<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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
+ */
+<div id="cls-Ext.list.ColumnResizer"></div>/**
+ * @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, {
+    <div id="cfg-Ext.list.ColumnResizer-minPct"></div>/**
+     * @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);
+    },
+    init : function(listView){
+        this.view = listView;
+        listView.on('render', this.initEvents, this);
+    },
+
+    initEvents : function(view){
+        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);
+    },
+
+    handleHdMove : function(e, t){
+        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 = '';
+            }
+        }
+    },
+
+    onBeforeStart : function(e){
+        this.dragHd = this.activeHd;
+        return !!this.dragHd;
+    },
+
+    onStart: function(e){
+        
+        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();
+        
+    },
+    
+    // Sets up the boundaries for the drag/drop operation
+    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;
+            }
+        }
+    },
+
+    onDrag: function(e){
+        var me = this,
+            cursorX = me.tracker.getXY()[0].constrain(me.minX, me.maxX);
+            
+        me.proxy.setWidth(cursorX - this.dragX);
+    },
+
+    onEnd: function(e){
+        /* 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>
\ No newline at end of file