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, 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>