Extjs面板拖拽实现Portal遇到一个问题
因为extjs自带的portal例子有点看不懂, 所以想自己写一个可拖拽的portal, 代码如下, 但是遇到一个问题: 把面板从一列拖到另外一列的任何一行是没有的, 但是对某列的某个portlet在当前列换个位置却不可以, 比如说把第一列的第一个portlet拖到第一列的第三行.
我的拖拽的实现逻辑也很简单, 做过extjs拖拽的都差不多看得懂.
把下面的html代码保存然后放到任何一个sample目录里面,亲手操作一下就知道我的问题了. 希望高手出招.
- JScript code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Grid to FormPanel Drag and Drop Example</title><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all-debug.js"></script><script type="text/javascript" src="../shared/code-display.js"></script><link rel="stylesheet" type="text/css" href="../shared/examples.css" /> <body></body><script>Ext.onReady(function(){ DraggablePanel = Ext.extend(Ext.Panel, { draggable: { insertProxy: true, isTarget : false }, height: 120 }); Ext.reg('portlet', DraggablePanel); var viewport = new Ext.Viewport({ layout: 'column', items: [{ columnWidth: .333, baseCls: 'x-plain', bodyStyle:'padding:0px', defaults: {frame: true, style: 'margin: 10px'}, items: [ new DraggablePanel({ title: 'Portal 00', html: 'portal 00' }), new DraggablePanel({ title: 'Portal 01', html: 'portal 01' }), new DraggablePanel({ title: 'Portal 02', html: 'portal 02' }), new DraggablePanel({ title: 'Portal 03', html: 'portal 03' }) ] }, { columnWidth: .333, baseCls: 'x-plain', bodyStyle:'padding:0px', defaults: {frame: true, style: 'margin: 10px'}, items: [ new DraggablePanel({ title: 'Portal 10', html: 'portal 10' }), new DraggablePanel({ title: 'Portal 11', html: 'portal 11' }), new DraggablePanel({ title: 'Portal 12', html: 'portal 12' }) ] }, { columnWidth: .333, baseCls: 'x-plain', bodyStyle:'padding:0px', defaults: {frame: true, style: 'margin: 10px'}, items: [ new DraggablePanel({ title: 'Portal 20', html: 'portal 20' }), new DraggablePanel({ title: 'Portal 21', html: 'portal 21' }), new DraggablePanel({ title: 'Portal 22', html: 'portal 22' }) ] }] }); var overrides = { onDragDrop: function(evtObj, targetElId) { var p = this.panel; var srcContainer = p.findParentByType('panel'); var destContainer = Ext.getCmp(targetElId); var s = srcContainer.remove(p, false); srcContainer.doLayout(); destContainer.insert(this.insertIndex, s); p.el.dom.style.display = ''; destContainer.doLayout(); Ext.log('*********onDragDrop to '+this.insertIndex+'*********'); }, onDragOver: function(evt, targetElId){ var p = this.panel var destContainer = Ext.getCmp(targetElId); var destEl = destContainer.body.dom; //Ext.log(destContainer.getEl().getHeight()); for(var i=0; i<destContainer.items.length; i++){ var child = destContainer.items.get(i); //var xy = child.getEl().getCenterXY(); var box = child.getBox(); var halfY = box.y+box.height/2; if(evt.getXY()[1]< halfY){ //Ext.log(evt.getXY()[1] + '<' + halfY +'insert before' + child.title + '----------' + i); var beforeNode = child.getEl().dom; //Ext.log(destEl.id); this.insertIndex = i; this.proxy.moveProxy(destEl, beforeNode); Ext.log(p.el.dom); this.proxy.getEl().dom.style.marginBottom = '10px'; return; } } Ext.log('--------insert to last--------'); this.insertIndex = i; this.proxy.moveProxy(destEl, null); } } for(var i=0; i<viewport.items.length; i++){ var col = viewport.items.get(i); var ddTarget = new Ext.dd.DDTarget(col.id, 'ddgroup'); for(var j=0; j<viewport.items.get(i).items.length; j++){ var p = viewport.items.get(i).items.get(j); var dd = p.dd; dd.addToGroup('ddgroup'); Ext.apply(dd, overrides); } } });</script></html>
[解决办法]
API的portal例子用的是ExtJS MVC的写法。你去看下examples\app\simple的MVC例子。