Extjs面板拖拽实现Portal遇到一个有关问题
日期：2014-05-16 浏览次数：20348 次
Extjs面板拖拽实现Portal遇到一个问题
因为extjs自带的portal例子有点看不懂, 所以想自己写一个可拖拽的portal, 代码如下, 但是遇到一个问题: 把面板从一列拖到另外一列的任何一行是没有的, 但是对某列的某个portlet在当前列换个位置却不可以, 比如说把第一列的第一个portlet拖到第一列的第三行.
我的拖拽的实现逻辑也很简单, 做过extjs拖拽的都差不多看得懂.
把下面的html代码保存然后放到任何一个sample目录里面,亲手操作一下就知道我的问题了. 希望高手出招.
因为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 = '';
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
