ExtTree之右键菜单增删改及拖拽同步数据库
ExtTree之右键菜单增删改及拖拽同步数据库

单凭一个ExtTree也要学习ExtJs是好多开发人员常说的话，的确，Ext对树的支持非常的好，并且展现起来非常美观。下面我就来通过代码介绍下我学习过程中关于ExtTree各方面的知识

代码如下：

Java代码
<SPAN style="FONT-SIZE: medium">   
 
Ext.onReady(function() {  
 
Ext.BLANK_IMAGE_URL = 'extjs3.1/resources/images/default/s.gif';  
 
var Tree = Ext.tree;  
 
 
 
 
// 定义根节点的Loader  
 
var treeloader = new Tree.TreeLoader( {  
 
dataUrl : "display.action?nodeId='A1'" 
 
});  
 
// 个人感觉上面这一步后面带的参数好像几乎没有起到作用，因为每次根节点第一次加载传数据时总是传递的是下面的  
 
 
 
var treepanel = new Tree.TreePanel( {  
 
// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。  
 
el : 'tree_div', // 填充区域 ，后面的这个值是HTML页面上设置的DIV元素  
 
rootVisible : true, // 设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性  
 
border : true, // 有边框  
 
animate : true, // 动画效果  
 
autoScroll : true, // 自动滚动  
 
enableDD : true, // 拖拽节点  
 
containerScroll : true,  
 
// root:rotnode, //两种设置root节点的方法，  
 
// 一种配置root，另一种就是setRootNode S  
 
loader : treeloader,  
 
useArrows : true,  
 
checkModel : 'cascade', // 对树的级联多选  
 
onlyLeafCheckable : false 
 
// 对树所有结点都可选  
 
 
 
 
// 一般来说treeloader都是加载第一次的请求路径，只不过跟没有动态加载数据的  
 
// 形如：loader: new Tree.TreeLoader({  
 
// dataUrl:'http://localhost:8080/Struts2JsonExtJsTree/menus.action'  
 
// })  
 
// 上面的那个因为它是异步加载数据所以是这样写的loader:new  
 
// Tree.TreeLoader({dataUrl:"menus.action?id='A1'"});  
 
});  
 
// 异步加载根节点  
 
var rootnode = new Tree.AsyncTreeNode( { // 这个根节点是整棵树的根节点，你必须手动写上他的名称  
 
         id : 'workArea',  
 
text : '工区管理',  
 
draggable : false 
 
// 这个表示我的根节点是否可以拖拽，默认跟写FALSE一样都是以不可拖拽的  
 
});  
 
// 设置根节点 ,设置之后当然要放到tree中去了  
 
treepanel.setRootNode(rootnode);  
 
 
 
 
// 响应事件，传递node参数 .这个响应我个人认为是你点击某个节点时就出发一个请求，这个请求传回来的数据导致你打开了下一级节点  
 
// /响应事件，传递node参数 也就是说每一次加载树之前都要通过'beforeload'事件加载子节点  
 
treepanel.on('beforeload', function(node) {  
 
treepanel.loader.dataUrl = 'display.action?id=' + node.id; // 定义子节点的Loader  
 
});  
 
 
 
 
// Ext Tree demo里面，使用movenode : ( Tree tree, Node node, Node oldParent,  
 
// Node newParent, Number index )  
 
// 来响应节点的拖动操作，在Ext.tree.TreePanel的定义中，加入如下代码，响应拖动操作  
 
// 在拖动的时候，主要通过发送ajax请求，到后台，进行数据的同步修改．（这一步非常重要）  
 
treepanel.on('movenode',function(tree,node,oldParent,newParent,index){  
 
Ext.Ajax.request({  
 
url:'move.action',  
 
params:{  
 
nodeId:node.id, &nbs