Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / ux / Portal.js
index bd97cab..322c23e 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-Ext.ux.Portal = Ext.extend(Ext.Panel, {\r
-    layout : 'column',\r
-    autoScroll : true,\r
-    cls : 'x-portal',\r
-    defaultType : 'portalcolumn',\r
-    \r
-    initComponent : function(){\r
-        Ext.ux.Portal.superclass.initComponent.call(this);\r
-        this.addEvents({\r
-            validatedrop:true,\r
-            beforedragover:true,\r
-            dragover:true,\r
-            beforedrop:true,\r
-            drop:true\r
-        });\r
-    },\r
-\r
-    initEvents : function(){\r
-        Ext.ux.Portal.superclass.initEvents.call(this);\r
-        this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);\r
-    },\r
-    \r
-    beforeDestroy : function() {\r
-        if(this.dd){\r
-            this.dd.unreg();\r
-        }\r
-        Ext.ux.Portal.superclass.beforeDestroy.call(this);\r
-    }\r
-});\r
-\r
-Ext.reg('portal', Ext.ux.Portal);\r
-\r
-\r
-Ext.ux.Portal.DropZone = function(portal, cfg){\r
-    this.portal = portal;\r
-    Ext.dd.ScrollManager.register(portal.body);\r
-    Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);\r
-    portal.body.ddScrollConfig = this.ddScrollConfig;\r
-};\r
-\r
-Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {\r
-    ddScrollConfig : {\r
-        vthresh: 50,\r
-        hthresh: -1,\r
-        animate: true,\r
-        increment: 200\r
-    },\r
-\r
-    createEvent : function(dd, e, data, col, c, pos){\r
-        return {\r
-            portal: this.portal,\r
-            panel: data.panel,\r
-            columnIndex: col,\r
-            column: c,\r
-            position: pos,\r
-            data: data,\r
-            source: dd,\r
-            rawEvent: e,\r
-            status: this.dropAllowed\r
-        };\r
-    },\r
-\r
-    notifyOver : function(dd, e, data){\r
-        var xy = e.getXY(), portal = this.portal, px = dd.proxy;\r
-\r
-        // case column widths\r
-        if(!this.grid){\r
-            this.grid = this.getGrid();\r
-        }\r
-\r
-        // handle case scroll where scrollbars appear during drag\r
-        var cw = portal.body.dom.clientWidth;\r
-        if(!this.lastCW){\r
-            this.lastCW = cw;\r
-        }else if(this.lastCW != cw){\r
-            this.lastCW = cw;\r
-            portal.doLayout();\r
-            this.grid = this.getGrid();\r
-        }\r
-\r
-        // determine column\r
-        var col = 0, xs = this.grid.columnX, cmatch = false;\r
-        for(var len = xs.length; col < len; col++){\r
-            if(xy[0] < (xs[col].x + xs[col].w)){\r
-                cmatch = true;\r
-                break;\r
-            }\r
-        }\r
-        // no match, fix last index\r
-        if(!cmatch){\r
-            col--;\r
-        }\r
-\r
-        // find insert position\r
-        var p, match = false, pos = 0,\r
-            c = portal.items.itemAt(col),\r
-            items = c.items.items, overSelf = false;\r
-\r
-        for(var len = items.length; pos < len; pos++){\r
-            p = items[pos];\r
-            var h = p.el.getHeight();\r
-            if(h === 0){\r
-                overSelf = true;\r
-            }\r
-            else if((p.el.getY()+(h/2)) > xy[1]){\r
-                match = true;\r
-                break;\r
-            }\r
-        }\r
-\r
-        pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);\r
-        var overEvent = this.createEvent(dd, e, data, col, c, pos);\r
-\r
-        if(portal.fireEvent('validatedrop', overEvent) !== false &&\r
-           portal.fireEvent('beforedragover', overEvent) !== false){\r
-\r
-            // make sure proxy width is fluid\r
-            px.getProxy().setWidth('auto');\r
-\r
-            if(p){\r
-                px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);\r
-            }else{\r
-                px.moveProxy(c.el.dom, null);\r
-            }\r
-\r
-            this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};\r
-            this.scrollPos = portal.body.getScroll();\r
-\r
-            portal.fireEvent('dragover', overEvent);\r
-\r
-            return overEvent.status;\r
-        }else{\r
-            return overEvent.status;\r
-        }\r
-\r
-    },\r
-\r
-    notifyOut : function(){\r
-        delete this.grid;\r
-    },\r
-\r
-    notifyDrop : function(dd, e, data){\r
-        delete this.grid;\r
-        if(!this.lastPos){\r
-            return;\r
-        }\r
-        var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;\r
-\r
-        var dropEvent = this.createEvent(dd, e, data, col, c,\r
-            pos !== false ? pos : c.items.getCount());\r
-\r
-        if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&\r
-           this.portal.fireEvent('beforedrop', dropEvent) !== false){\r
-\r
-            dd.proxy.getProxy().remove();\r
-            dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);\r
-            \r
-            if(pos !== false){\r
-                if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){\r
-                    pos++;\r
-                }\r
-                c.insert(pos, dd.panel);\r
-            }else{\r
-                c.add(dd.panel);\r
-            }\r
-            \r
-            c.doLayout();\r
-\r
-            this.portal.fireEvent('drop', dropEvent);\r
-\r
-            // scroll position is lost on drop, fix it\r
-            var st = this.scrollPos.top;\r
-            if(st){\r
-                var d = this.portal.body.dom;\r
-                setTimeout(function(){\r
-                    d.scrollTop = st;\r
-                }, 10);\r
-            }\r
-\r
-        }\r
-        delete this.lastPos;\r
-    },\r
-\r
-    // internal cache of body and column coords\r
-    getGrid : function(){\r
-        var box = this.portal.bwrap.getBox();\r
-        box.columnX = [];\r
-        this.portal.items.each(function(c){\r
-             box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});\r
-        });\r
-        return box;\r
-    },\r
-\r
-    // unregister the dropzone from ScrollManager\r
-    unreg: function() {\r
-        //Ext.dd.ScrollManager.unregister(this.portal.body);\r
-        Ext.ux.Portal.DropZone.superclass.unreg.call(this);\r
-    }\r
-});\r
+Ext.ux.Portal = Ext.extend(Ext.Panel, {
+    layout : 'column',
+    autoScroll : true,
+    cls : 'x-portal',
+    defaultType : 'portalcolumn',
+    
+    initComponent : function(){
+        Ext.ux.Portal.superclass.initComponent.call(this);
+        this.addEvents({
+            validatedrop:true,
+            beforedragover:true,
+            dragover:true,
+            beforedrop:true,
+            drop:true
+        });
+    },
+
+    initEvents : function(){
+        Ext.ux.Portal.superclass.initEvents.call(this);
+        this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
+    },
+    
+    beforeDestroy : function() {
+        if(this.dd){
+            this.dd.unreg();
+        }
+        Ext.ux.Portal.superclass.beforeDestroy.call(this);
+    }
+});
+
+Ext.reg('portal', Ext.ux.Portal);
+
+
+Ext.ux.Portal.DropZone = function(portal, cfg){
+    this.portal = portal;
+    Ext.dd.ScrollManager.register(portal.body);
+    Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
+    portal.body.ddScrollConfig = this.ddScrollConfig;
+};
+
+Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
+    ddScrollConfig : {
+        vthresh: 50,
+        hthresh: -1,
+        animate: true,
+        increment: 200
+    },
+
+    createEvent : function(dd, e, data, col, c, pos){
+        return {
+            portal: this.portal,
+            panel: data.panel,
+            columnIndex: col,
+            column: c,
+            position: pos,
+            data: data,
+            source: dd,
+            rawEvent: e,
+            status: this.dropAllowed
+        };
+    },
+
+    notifyOver : function(dd, e, data){
+        var xy = e.getXY(), portal = this.portal, px = dd.proxy;
+
+        // case column widths
+        if(!this.grid){
+            this.grid = this.getGrid();
+        }
+
+        // handle case scroll where scrollbars appear during drag
+        var cw = portal.body.dom.clientWidth;
+        if(!this.lastCW){
+            this.lastCW = cw;
+        }else if(this.lastCW != cw){
+            this.lastCW = cw;
+            portal.doLayout();
+            this.grid = this.getGrid();
+        }
+
+        // determine column
+        var col = 0, xs = this.grid.columnX, cmatch = false;
+        for(var len = xs.length; col < len; col++){
+            if(xy[0] < (xs[col].x + xs[col].w)){
+                cmatch = true;
+                break;
+            }
+        }
+        // no match, fix last index
+        if(!cmatch){
+            col--;
+        }
+
+        // find insert position
+        var p, match = false, pos = 0,
+            c = portal.items.itemAt(col),
+            items = c.items.items, overSelf = false;
+
+        for(var len = items.length; pos < len; pos++){
+            p = items[pos];
+            var h = p.el.getHeight();
+            if(h === 0){
+                overSelf = true;
+            }
+            else if((p.el.getY()+(h/2)) > xy[1]){
+                match = true;
+                break;
+            }
+        }
+
+        pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
+        var overEvent = this.createEvent(dd, e, data, col, c, pos);
+
+        if(portal.fireEvent('validatedrop', overEvent) !== false &&
+           portal.fireEvent('beforedragover', overEvent) !== false){
+
+            // make sure proxy width is fluid
+            px.getProxy().setWidth('auto');
+
+            if(p){
+                px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
+            }else{
+                px.moveProxy(c.el.dom, null);
+            }
+
+            this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
+            this.scrollPos = portal.body.getScroll();
+
+            portal.fireEvent('dragover', overEvent);
+
+            return overEvent.status;
+        }else{
+            return overEvent.status;
+        }
+
+    },
+
+    notifyOut : function(){
+        delete this.grid;
+    },
+
+    notifyDrop : function(dd, e, data){
+        delete this.grid;
+        if(!this.lastPos){
+            return;
+        }
+        var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
+
+        var dropEvent = this.createEvent(dd, e, data, col, c,
+            pos !== false ? pos : c.items.getCount());
+
+        if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
+           this.portal.fireEvent('beforedrop', dropEvent) !== false){
+
+            dd.proxy.getProxy().remove();
+            dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
+            
+            if(pos !== false){
+                if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
+                    pos++;
+                }
+                c.insert(pos, dd.panel);
+            }else{
+                c.add(dd.panel);
+            }
+            
+            c.doLayout();
+
+            this.portal.fireEvent('drop', dropEvent);
+
+            // scroll position is lost on drop, fix it
+            var st = this.scrollPos.top;
+            if(st){
+                var d = this.portal.body.dom;
+                setTimeout(function(){
+                    d.scrollTop = st;
+                }, 10);
+            }
+
+        }
+        delete this.lastPos;
+    },
+
+    // internal cache of body and column coords
+    getGrid : function(){
+        var box = this.portal.bwrap.getBox();
+        box.columnX = [];
+        this.portal.items.each(function(c){
+             box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
+        });
+        return box;
+    },
+
+    // unregister the dropzone from ScrollManager
+    unreg: function() {
+        //Ext.dd.ScrollManager.unregister(this.portal.body);
+        Ext.ux.Portal.DropZone.superclass.unreg.call(this);
+    }
+});