因为extjs自带的portal例子有点看不懂, 所以想自己写一个可拖拽的portal, 代码如下, 但是遇到一个问题: 把面板从一列拖到另外一列的任何一行是没有的, 但是对某列的某个portlet在当前列换个位置却不可以, 比如说把第一列的第一个portlet拖到第一列的第三行.
我的拖拽的实现逻辑也很简单, 做过extjs拖拽的都差不多看得懂.
把下面的html代码保存然后放到任何一个sample目录里面,亲手操作一下就知道我的问题了. 希望高手出招.<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>
我的拖拽的实现逻辑也很简单, 做过extjs拖拽的都差不多看得懂.
把下面的html代码保存然后放到任何一个sample目录里面,亲手操作一下就知道我的问题了. 希望高手出招.<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>
Ext.dd.DDTarget和
var p = viewport.items.get(i).items.get(j);
var dd = p.dd;
中的dd属性哪定义的？
dd是draggable的panel的public属性.dd : Ext.dd.DragSource.If this Panel is configured draggable, this property will contain an instance of Ext.dd.DragSource which handles dragging the Panel.
The developer must provide implementations of the abstract methods of Ext.dd.DragSource in order to supply behaviour for each stage of the drag/drop process. See draggable.希望和你交流extjs. 最近公司花大钱买了extjs和designer的license.