ext portal+dwr+spring实现个性主页面拖拉效果的核心代码

个性化主页设置，左边是一棵树，左边是一个portal.点击树加载到portal中去，实现了与数据库的交互.ccom.dzf.indexset = function(config) {    Ext.apply(this,config);    this.init();};Ext.extend(com.dzf.indexset, Ext.util.Observable, {    init : function() {        this.createWin();    },    createWin : function() {        var proxy = this;        var win = new Ext.Window({            height : 450,            width : 800,            items : [{                xtype : 'tabpanel',                border : false,                activeTab : 0,                defaults : {                    height : 380                },                items : [{                            title : '主页设置',                            layout : 'column',                            border : false,                            items : [{                                        columnWidth : .2,                                        title : '模块列表',                                        defaults : {                                            height : 380                                        },                                        items : [this.getTree()]                                    }, {                                        xtype : 'portal',                                        columnWidth : .8,                                        id : 'portalset',                                        defaults : {                                            height : 380                                        }                                    }]                        }, {                            title : '设置密码'                        }]            }],            buttons : [{                text : '确定',                handler : function() {                    win.close();                    var portal= Ext.getCmp(proxy.panelid);                    //portal.desto;                     items=portal.items.items[0].destroy();//                    for(var i=0;i<items.length;i++){ //                        var p=items[i].items.items; //                        items[i].doLayout();                         for(var j=0;j<p.length;j++){                             count++;                         } //                    } //                    portal.doLayout();                     new com.dzf.index({                        panelid : 'center-panel',                        margins : '35 5 5 5',                        style : 'padding:0px 10px 0px 10px'                    });                }            }]        });        win.show();    },    getTree : function() {        var tree = new Ext.tree.TreePanel({            border : false,            onlyLeafCheckable : false,            checkModel : "multiple",            id : 'tree',            autoScroll : true,            enableDD : false,            containerScroll : true,            rootVisible : false,            loader : new Ext.tree.DWRTreeLoader({                dwrCall : indexportalService.getUserModule,                getParams : function(node) {                    return {};                },                baseAttrs : {                    uiProvider : Ext.tree.TreeCheckNodeUI                }            }),            tools : [{                id : 'refresh',// 根据id的不同会出现不同的按钮                 handler : function() {                    var tree = Ext.getCmp('extExample-tree-checkboxTree');                    tree.root.reload();// 让根节点重新加载                     tree.body.mask('数据加载中……', 'x-mask-loading');// 给tree的body加上蒙版                     tree.root.expand(true, false, function() {                                tree.body.unmask();// 全部展开之后让蒙版消失                                 indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);                            });                }            }]        });        var root = new Ext.tree.AsyncTreeNode({            text : '根',            draggable : false        });        tree.setRootNode(root);        root.expand(true, false, function() {            indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);        });//        root.loadComplete(true, false, function() { //            indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn); //        });         treeCheckAction = function(node, checked) {            var id = node.id;            var title = node.text;            var portlet = Ext.getCmp(id+"set");            if (checked) {                if (portlet) {                    return;                }                var count=0;                var portal= Ext.getCmp("portalset").items.items;                for(var i=0;i<portal.length;i++){                    var p=portal[i].items.items;                    for(var j=0;j<p.length;j++){                        count++;                    }                }                if(count<=4){                    var order = 0;                    var parent = Ext.getCmp("portalcolumn" + node.attributes.userid                            + node.attributes.modulecolumn + "set");                    var panel = new Ext.ux.Portlet({                        id : id+"set",                        title : title                    });                    if (!parent) {                        parent = Ext.getCmp("portalset").items.items[0];                    }                    parent.add(panel);                    parent.doLayout();                    order = parent.items.items.length - 1;                    var params = {                        id : id,                        order : order,                        columnwidth : parent.columnWidth                    };                    indexportalService.savePortlet(params);                }else{                    node.ui.checkbox.checked = false;                    Ext.MessageBox.alert("提示","你最多能选择5个！")                }            } else {                com.dzf.indexset.prototype.removePorlet(portlet);            }        }        tree.on("check", treeCheckAction, this);        return tree;    },    tools : [{        id : 'close',        handler : function(e, target, panel) {            com.dzf.indexset.prototype.removePorlet(panel);        }    }],    removePorlet : function(panel) {        // Ext.Msg.confirm('删除模块', '您确认要删除"' + panel.title + '"吗?',         // function(btn,         // text) {         // if (btn == 'yes') {         var id = panel.id;        var columnid = panel.ownerCt.id;        var params = {            id : id,            columnid : columnid        };        // 发送删除数据的请求         indexportalService.removePorlet(params, function(data) {                    var json = Ext.util.JSON.decode(data);                    if (json.success) {                        var id = panel.id;                        var parent=panel.ownerCt;                        parent.remove(panel, true);                        parent.doLayout();                        if(id.indexOf("set")>0)                           id=id.substring(0,id.indexOf("set"));                        Ext.getCmp("tree").getNodeById(id).ui.checkbox.checked = false;                    } else {                        Ext.Msg.alert('WebMessage', panel.title + '删除失败！');                    }                });        // } else {         // return;         // }         // });     },    BuildPortColumn : function(data) {        var jsonData = Ext.util.JSON.decode(data);        for (var i = 0; i < jsonData.length; i++) {            var columnid = jsonData[i].fuserprocolumn_id + "set";            var columnwidth = jsonData[i].fuserprocolumn_width / 100;            var portal = Ext.getCmp("portalset");            var PortalColumn = new Ext.ux.PortalColumn({                id : columnid,                columnWidth : columnwidth,                style : 'padding:10px 0 10px 10px',                defaults : {                    tools : com.dzf.indexset.prototype.tools,                    height : 60                }            });            portal.add(PortalColumn);            portal.doLayout();        }        indexportalService                .getPortalPortlet(com.dzf.indexset.prototype.BuildPortletSet);    },    BuildPortletSet : function(data) {        var jsonData = Ext.util.JSON.decode(data);        for (var i = 0; i < jsonData.length; i++) {            var columnid = jsonData[i].fuserprocolumn_id + "set";            var id = jsonData[i].modelcode+"set";            var title = jsonData[i].modelname;            var order = jsonData[i].fuserprofile_order;            var parent = Ext.getCmp(columnid);            if (!parent) {                parent = Ext.getCmp("portalset").items.items[0];            }            var panel = new Ext.ux.Portlet({                id : id,                title : title            });            parent.add(panel);            parent.doLayout();            if(id.indexOf("set")>0)                id=id.substring(0,id.indexOf("set"));            Ext.getCmp("tree").getNodeById(id).ui.checkbox.checked = true;        }    }})protal源码改了下 可以进行移动保存Ext.ux.Portlet = Ext.extend(Ext.Panel, {            anchor : '100%',            collapsible : true,            draggable : true,            cls : 'x-portlet'        });Ext.reg('portlet', Ext.ux.Portlet);Ext.ux.PortalColumn = Ext.extend(Ext.Container, {            layout : 'anchor',            autoEl : 'div',            defaultType : 'portlet',            cls : 'x-portal-column'        });Ext.reg('portalcolumn', Ext.ux.PortalColumn);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;        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);            }            /**             * 取得当前portlet在portal column中的索引             */            var index = 0;            var portletId = dd.panel.id;            if (pos != false) {                var portlets = c.items;                for (var i = 0; i < portlets.length; i++) {                    if (c.items.itemAt(i).id === portletId) {                        index = i;                        break;                    }                }            } else {                if (pos.toString() == '0') {                    index = 0;                } else {                    index = c.items.length - 1;                }            }                        c.doLayout();            //更新移动后的Portlet             var params ={                id : dd.panel.id,                columnid:c.id,                forder : index            };            indexportalService.movePortlet(params);                        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);    }});