portal 源代码

portal作为一个可以自定义拖动 元素的的元件，功能不错，现在将代码贴在这里 以后 再研究研究。

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

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);
    }
});
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;

        for (var len = items.length; pos < len; pos++) {
            p = items[pos];
            var h = p.el.getHeight();
            if (h !== 0 && (p.el.getY() + (h / 2)) > xy[1]) {
                match = true;
                break;
            }
        }

        var overEvent = this.createEvent(dd, e, data, col, c, match && p ? pos : c.items.getCount());

        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 : 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) {
                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;
    }
});

//============================================================================================================================
/*
 *这里定义了 一个  继承自 panel 的  自定义 panel
 *
 * portlet
 *
 */

Ext.ux.Portlet = Ext.extend(Ext.Panel, {
    anchor : '100%',
    frame : true, //显示框架
    collapsible : true, //可折叠
    draggable : true, //可拖动
    cls : 'x-portlet'
});
Ext.reg('portlet', Ext.ux.Portlet);

//=============================-===================================================================================================================
/**
 *这里  定义了一个 基本 类型为 portlet 自定义 panel 的 自定义容器类型
 *
 * portalcolumn
 *
 *  **/
Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
    layout : 'anchor',
    autoEl : 'div',
    defaultType : 'portlet',
    cls : 'x-portal-column'
});
Ext.reg('portalcolumn', Ext.ux.PortalColumn);

//--------------------------------------------------------------------------------------------------------------------------------------

调用实现

/*
 * 整个包含了 一个  可动态 拖动 panel 的实例
 * 
 */

Ext.onReady(function() {

   // Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // 自定义 工具条
    var tools = [{
        id : 'gear',
        handler : function() {
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    }, {
        id : 'close',
        handler : function(e, target, panel) {
            panel.ownerCt.remove(panel, true);
        }
    }];

    /**浏览器视口**/
    var viewport = new Ext.Viewport({
        title : "ViewPort",
        layout : 'border',

        items : [{

            //这个是  边 部菜单
        
            region : 'west',
            id : 'west-panel',
            title : '整个是可收缩菜单',
            split : true,
            width : 200,
            minSize : 175,
            maxSize : 400,
            collapsible : true,
            margins : '35 0 5 5',
            cmargins : '35 5 5 5',
            layout : 'accordion',
            layoutConfig : {
                animate : true
            },

            items : [{
                title : '菜单',
                html : "整个是 html ",

                autoScroll : true, //自动 滚动条
                border : true, //边框
                iconCls : 'nav'
            }, {
                title : 'Settings',
                title : "设置",
                html : "这里是设置菜单",
                border : false,
                autoScroll : true,
                iconCls : 'settings'
            }]
        }, {
            // 可 拖动的区域
            xtype : 'portal',
            region : 'center',  //布局方式 ,类似于 java 中 anchor， 有 东 西 南 北 中 
            margins : '35 5 5 0',
            
            
            /**这里边   为 可拖动的 控件**/
            items : [{
                columnWidth : .33,
                style : 'padding:10px 0 10px 10px',
                items : [{
                    title : '可移动表格',
                    layout : 'fit',
                    tools : tools,
                    
                    items:new SampleGrid([0, 2, 3])
                    
                    
                    
                }, {
                     
                    title : '国内新闻',
                    tools : tools,
                    html : "<p>人民网北京11月3日电 据中国气象局网站消息<br/>预计3日20时至4日20时，内蒙古中东部偏南地区、河北西北部、山西东北部、北京西部等地有大雪，其中内蒙古中东部偏南地区、河北西北部、北京西部山区等地的部分地区有暴雪（10～20毫米），河北西北部局地有大暴雪（20～30毫米）。降雪等级标准：以24小时降水量为划分标准，其中，降水量达到5.0～9.9毫米为大雪，降水量达到或超过10毫米为暴雪。降雪量与积雪深度的对应关系：当降雪落地后无融化时，一般而言，在北方地区1毫米降雪可形成的积雪深度有8～10毫米，在南方地区积雪深度有6～8毫米。防御指南：1.政府及相关部门按照职责做好防雪灾和防冻害的应急工作；2.交通、铁路、电力、通信等部门应当加强道路、铁路、线路巡查维护，做好道路清扫和积雪融化工作；3.减少不必要的户外活动；4.加固棚架等易被雪压的临时搭建物，将户外牲畜赶入棚圈喂养。</p>",
                }]
            }, {
                columnWidth : .33,
                style : 'padding:10px 0 10px 10px',
                items : [{
                    title : '国际新闻',
                    tools : tools,
                    
                    html : "<img style=\"width:400px;height:200px;\" src=\"http://www.cnr.cn/newscenter/fun/yuleyaowen/201211/W020121103693026149926.jpg\"/><br/>当地时间11月2日中午，在世界文坛上颇有影响的华裔女作家韩素音在瑞士洛桑的寓所无疾而终，享年96岁。这是韩素音女士2007年9月21日在瑞士洛桑寓所的资料照片。 新华社记者杨京德摄",
                }]
            }, {
                columnWidth : .33,
                style : 'padding:10px',
                items : [{
                    title : '军事新闻',
                    tools : tools,
                    
                    html : "新华网天津１１月２日（记者张毅 孙洪磊）作为军转民的重要成果，１１月２日，中国兵器工业集团公司所属武重集团将一批国产重大装备产品，正式交付给位于天津滨海重机工业园区内的天津赛瑞公司。此次交付的重大装备包括数控重型立式车床、龙门镗铣床、卧式铣车床等多个品种的产品，总价值２亿元。这些国产重大装备形成了强大的机械加工阵势，彰显出中国兵器工业集团在我国机床行业及超重型机床制造领域的重要地位。此次交付的高难度高技术机床制造设备，创出多项世界之最。ＣＫＸ５３２８０型立式铣车床，最大加工直径１４米，加工规格为世界之最。ＤＬ２５０型超重型数控卧式铣车床打破了国外技术封锁和限制，为国家战略装备的研制提供了关键加工技术保障。ＦＢ３２０型超重型数控落地铣镗床镗轴直径达到了３２０毫米，回转工作台承重达６００吨，目前仅有德国，捷克等少数几个国家能够生产。ＸＫＵ２６８０型超重型数控龙门镗铣床，龙门间距１０米，工作平台长６４米，龙门移动部件重３００吨。如此规格的龙门镗铣床在我国国内尚属首次。近年来，兵器工业集团坚持技术创新和管理创新，打造国家重型装备重要产业基地。相继研发成功世界最大３．６万吨黑色金属垂直挤压机、ＤＬ２５０型超重型数控卧式铣车床等一系列举重大装备产品，提升了我国在世界重型装备制造领域的实力和地位。",
                }]
            }]

        }]
    });
    
    
    
});