您的位置：首页 > Web前端 > JavaScript

EXTJS将树拖拽到PANEL，drag tree drop into panel 实例

2011-03-26 13:58 417 查看

JScript

// JScript 文件
Ext.namespace('Ext.test');

Ext.test.Panel = function() {

this.right = new Ext.Panel({
ddGroup: 'TreePanelDDGroup',
border : true,
id : 'right',
title:'Panel',
bodyStyle : 'padding: 5px',
defaults : {
bodyStyle : 'padding-left: 5px'
}
});

this.left = new Ext.tree.TreePanel({
ddGroup: 'TreePanelDDGroup',
rootVisible: false,
width: 200,
split:true,
enableDD:true,
title: "Drag Tree"
/*loader:new Ext.tree.TreeLoader({
dataUrl:"Dtree.aspx"
}),
root:new Ext.tree.AsyncTreeNode({
id:'rootid',
text:'公司'
})*/
});

//this.left.expandAll();

function buildTree(config){
if (!config) return null;
var c = config.children;
config.leaf = c ? false : true;
var child, node = new Ext.tree.TreeNode(config);
if (node && c && c.length) {
for (var i = 0; i < c.length; i++) {
child = buildTree(c[i]);
if (child) node.appendChild(child);
}
}
return node;
}

var rootDrag = buildTree({
id : 'rootDrag',
text: 'rootDrag',
children: [
{id: 1, text: 'childnode1'},
{id: 2, text: 'childnode2'},
{id: 3, text: 'childnode3'},
{id: 4, text: 'childnode4'},
{id: 5, text: 'childnode5'}
]
});

this.left.setRootNode(rootDrag);

this.right.on('render', this.onRightRender, this);

Ext.test.Panel.superclass.constructor.call(this, {
renderTo : 'pageContainer',
bodyStyle : 'padding: 5px',
height : 500,
width : 760,
title : 'Demo',
layout : 'table',
defaults : {
height : 200,
width : 200
},
items : [this.left, this.right]
});
};

Ext.extend(Ext.test.Panel, Ext.Panel, {
onRightRender : function(cmp) {
var sourcePanelDropTarget = new Ext.dd.DropTarget(cmp.body.dom,
{
ddGroup: 'TreePanelDDGroup',
notifyDrop : function(ddSource, e, data) {
Ext.MessageBox.alert(data.node);
cmp.add(new Ext.Panel({
boder:true,
id:data.node,
bodyStyle : 'padding: 5px',
defaults : {
bodyStyle : 'padding-left: 5px'
}
}));
cmp.doLayout();
data.node.parentNode.removeChild(data.node);
return (true);
}
});
}
});

Ext.onReady(function() {
Ext.QuickTips.init();
var panel = new Ext.test.Panel();
});

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dragTreedropPanel.aspx.cs" Inherits="dragTreedropPanel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link rel="stylesheet" type="text/css" href="EXT/resources/css/ext-all.css" mce_href="EXT/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="EXT/adapter/ext/ext-base.js" mce_src="EXT/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="EXT/ext-all.js" mce_src="EXT/ext-all.js"></mce:script>
<mce:script type="text/javascript" src="dragTreedropPanel.js" mce_src="dragTreedropPanel.js"></mce:script>
</head>
<body>
<div id="pageContainer"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航