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,  
 
oldParentId:oldParent.id,  
 
newParentId:newParent.id,  
 
index:index  
 
}  
 
});  
 
});  
 
/* 

* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point 

* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点 

* 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。 

*/ 
 
// treepanel.on('nodedrop', function(e) {  
 
// if(e.point=='append'){  
 
// Ext.Ajax.request({  
 
// url:'node.action',  
 
// params:{  
 
// nodeId:e.dropNode.id,  
 
// oldParentId:e.parentNode.id,  
 
// newParentId:e.target.id  
 
// }  
 
// });  
 
// }  
 
// var msg;  
 
// if (e.point == 'append') {  
 
// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text  
 
// + '】"下！';  
 
// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text  
 
// // + '】"下！');  
 
// // var resultUrl =  
 
// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";  
 
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",  
 
// // resultUrl, null, null);  
 
// } else if (e.point == 'above') {  
 
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text  
 
// // + '"上面！');  
 
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text  
 
// + '"上面！';  
 
// // var resultUrl =  
 
// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";  
 
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",  
 
// // resultUrl, null, null);  
 
//  
 
// } else if (e.point == 'below') {  
 
// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text  
 
// // + '"下面！');  
 
// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text  
 
// + '"下面！';  
 
// // var resultUrl =  
 
// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";  
 
// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",  
 
// // resultUrl, null, null);  
 
// }  
 
//  
 
// // var viewPanel = Ext.getCmp('tree-window-view');  
 
// // // 得到选中的节点  
 
// // win.setTitle('消息提示');  
 
// // win.show();  
 
// // var tmpTpl = new Ext.Template(msg);  
 
// // tmpTpl.overwrite(viewPanel.body);  
 
// Ext.Msg.alert("消息提示", msg);  
 
//  
 
// });  
 
treepanel.render(); // 这个tree当然要呈现出来喽  
 
rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的，所以这个位置最佳了  
 
 
 
 
// 定义右键菜单  
 
var contextMenu = new Ext.menu.Menu( {  
 
items : [ {  
 
text : '添加子节点',  
 
handler : addHandler  
 
}, {  
 
text : '添加兄弟点',  
 
handler : addBrotherHandler  
 
}, {  
 
text : '删除',  
 
handler : deleteHandler  
 
}, {  
 
text : '重命名',  
 
handler : modifyHandler  
 
}, {  
 
text : '查看',  
 
handler : viewHandler  
 
} ]  
 
});  
 
// var treeSorter = new Ext.tree.TreeSorter(treepanel, {  
 
// folderSort : true, //文件排序  
 
// dir : 'asc' //升序, 这样如果排序的话，我的同级目录可能移动的时候就不起租  
 
// });  
 
var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器  
 
allowBlank : false, // 允许出现空白  
 
cancelOnEsc : true,// 按下ESC建自动取消空白  
 
selectOnFocus : true   
 
});  
 
// 弹出窗口  
 
var win = new Ext.Window( {  
 
maskDisabled : false,  
 
id : 'tree-window',  
 
modal : true,// 是否为模式窗口  
 
constrain : true,// 窗口只能在viewport指定的范围  
 
closable : true,// 窗口是否可以关闭  
 
closeAction : 'hide',  
 
layout : 'fit',  
 
width : 300,  
 
height : 200,  
 
plain : true,  
 
items : [ {  
 
id : 'tree-window-view',  
 
border : false 
 
} ]  
 
});  
 
           
 
treepanel.on('contextmenu', treeContextHandler);  
 
// 拖拽后  
 
treepanel.on('beforemovenode', function(tree, node, oldParent,  
 
newParent, index) {  
 
// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'  
 
// + index);  
 
// TODO 存储入库的操作  
 
});  
 
// 拖拽判断，用于处理叶节目不能append的问题  
 
treepanel.on('nodedragover', function(e) {  
 
var n = e.target;  
 
if (n.leaf) {  
 
n.leaf = false;  
 
}  
 
return true;  
 
});  
 
 
 
 
// treeEditor.on('complete', function(o, newText, oldText) {  
 
//  alert('执行我啊，编辑器处理玩了');  
 
//  Ext.Ajax.request({  
 
// url:'addchildnode.action',  
 
// params:{  
 
//     newname:newText,  
 
// nodeId:currentId,  
 
// oldname:oldValue  
 
// }  
 
//  });  
 
// },this,true);  
 
var pid;  
 
var flag;  
 
treeEditor.on("complete", function(treeEditor){  
 
  alert(treeEditor.editNode.text);  
 
  var ppid=pid==null?treeEditor.editNode.id:pid;  
 
  var fflag=flag==null?'modify':flag;  
 
          Ext.Ajax.request({  
 
url:"addnode.action",  
 
params:{  
 
    newname:treeEditor.editNode.text,  
 
    sign:fflag,  
 
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID  
 
}  
 
});  
 
      });  
 
 
 
 
// 绑定节点右键菜单功能  
 
function treeContextHandler(node, event) {  
 
event.preventDefault();//一说是组织浏览器的默认右键事件，二说是防止两次出现右键画面（怎么可能出现两次）  
 
node.select();//选中右键单击的节点,有了它才有了希望  
 
contextMenu.show(node.ui.getAnchor());  
 
this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现  
 
}  
 
// 插入子节点  
 
function addHandler() {  
 
var newNode = new Ext.tree.TreeNode( {  
 
text : '新建节点' 
 
});  
 
var selectedNode = treepanel.getSelectionModel().getSelectedNode();  
 
pid=selectedNode.id;  
 
flag='add';  
 
selectedNode.leaf = false;  
 
selectedNode.expand(false, true, function() {  
 
// 注意，应该先由expand展开非叶子节点，才能为之插入子节点，否则会出错  
 
selectedNode.appendChild(newNode);  
 
treepanel.getSelectionModel().select(newNode);  
 
setTimeout(function() {  
 
treeEditor.editNode = newNode;  
 
treeEditor.startEdit(newNode.ui.textNode);  
 
}, 10);  
 
 
 
});  
 
}  
 
function addBrotherHandler() {  
 
var newNode = new Ext.tree.TreeNode( {  
 
text : '新建节点' 
 
});  
 
var selectedNode = treepanel.getSelectionModel().getSelectedNode();  
 
var selectedParentNode = selectedNode.parentNode;  
 
pid=selectedParentNode.id;  
 
flag='add';  
 
if (selectedParentNode == null) {  
 
selectedNode.appendChild(newNode);  
 
} else {  
 
selectedParentNode.insertBefore(newNode, selectedNode);  
 
}  
 
setTimeout(function() {  
 
treeEditor.editNode = newNode;  
 
treeEditor.startEdit(newNode.ui.textNode);  
 
}, 10);  
 
}  
 
function deleteHandler() {  
 
var nodeid=treepanel.getSelectionModel().getSelectedNode().id;  
 
var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;  
 
//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;  
 
alert(nodeid+"==="+pnodeid);  
 
          Ext.Ajax.request({  
 
url:'deletenode.action',  
 
params:{  
 
nodeId:nodeid,  
 
oldParentId:pnodeid  
 
}  
 
});  
 
treepanel.getSelectionModel().getSelectedNode().remove();  
 
 
 
}  
 
function modifyHandler() {  
 
var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点  
 
pid=selectedNode.id;  
 
flag='modify';  
 
treeEditor.editNode = selectedNode;  
 
treeEditor.startEdit(selectedNode.ui.textNode);  
 
}  
 
function viewHandler() {  
 
var viewPanel = Ext.getCmp('tree-window-view');  
 
var selectedNode = treepanel.getSelectionModel().getSelectedNode();  
 
// 得到选中的节点  
 
var tmpid = selectedNode.attributes.id;  
 
var tmpname = selectedNode.attributes.text;  
 
var tmpdes = selectedNode.attributes.description;  
 
var tmphref = selectedNode.attributes.href;  
 
 
 
 
win.setTitle(tmpname + '的介绍');  
 
win.show();  
 
 
 
 
var dataObj = {  
 
id : tmpid,  
 
name : tmpname,  
 
des : tmpdes,  
 
href : tmphref  
 
}  
 
var tmpTpl = new Ext.Template(  
 
['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',  
 
'<div style="margin:10px">名称:{name}</div>',  
 
'<div style="margin:10px">描述:{des}</div>',  
 
'<div style="margin:10px">链接:{href}</div></div></div>' ]);  
 
tmpTpl.overwrite(viewPanel.body, dataObj);  
 
}  
 
// function myEditor(editor, newValue, oldValue) {  
 
//   
 
//// Ext.Ajax.request({  
 
//// url:'addchildnode.action',  
 
//// params:{  
 
//// newname:newValue,  
 
//// nodeId:currentId,  
 
//// }  
 
////     });  
 
//     }     
 
 
 
 
 
 
 
});  
 
</SPAN> 



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,

oldParentId:oldParent.id,

newParentId:newParent.id,

index:index

}

});

});

/*

* 设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point

* 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点

* 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。

*/

// treepanel.on('nodedrop', function(e) {

// if(e.point=='append'){

// Ext.Ajax.request({

// url:'node.action',

// params:{

// nodeId:e.dropNode.id,

// oldParentId:e.parentNode.id,

// newParentId:e.target.id

// }

// });

// }

// var msg;

// if (e.point == 'append') {

// msg = '当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// + '】"下！';

// // alert('当前"【' + e.dropNode.text + '】"被放到目录"【' + e.target.text

// // + '】"下！');

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// } else if (e.point == 'above') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"上面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"上面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

//

// } else if (e.point == 'below') {

// // alert('当前"' + e.dropNode.text + '"放在了"' + e.target.text

// // + '"下面！');

// msg = '当前"' + e.dropNode.text + '"放在了"' + e.target.text

// + '"下面！';

// // var resultUrl =

// // "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";

// // var resulthtml = XmlHttpHelper.transmit(false, "get", "text",

// // resultUrl, null, null);

// }

//

// // var viewPanel = Ext.getCmp('tree-window-view');

// // // 得到选中的节点

// // win.setTitle('消息提示');

// // win.show();

// // var tmpTpl = new Ext.Template(msg);

// // tmpTpl.overwrite(viewPanel.body);

// Ext.Msg.alert("消息提示", msg);

//

// });

treepanel.render(); // 这个tree当然要呈现出来喽

rootnode.expand();// 这个控制出来的节点是否全部都展开,这行代码是可以决定是否出来图像的，所以这个位置最佳了




// 定义右键菜单

var contextMenu = new Ext.menu.Menu( {

items : [ {

text : '添加子节点',

handler : addHandler

}, {

text : '添加兄弟点',

handler : addBrotherHandler

}, {

text : '删除',

handler : deleteHandler

}, {

text : '重命名',

handler : modifyHandler

}, {

text : '查看',

handler : viewHandler

} ]

});

// var treeSorter = new Ext.tree.TreeSorter(treepanel, {

// folderSort : true, //文件排序

// dir : 'asc' //升序, 这样如果排序的话，我的同级目录可能移动的时候就不起租

// });

var treeEditor = new Ext.tree.TreeEditor(treepanel, {// 树形编辑器

allowBlank : false, // 允许出现空白

cancelOnEsc : true,// 按下ESC建自动取消空白

selectOnFocus : true

});

// 弹出窗口

var win = new Ext.Window( {

maskDisabled : false,

id : 'tree-window',

modal : true,// 是否为模式窗口

constrain : true,// 窗口只能在viewport指定的范围

closable : true,// 窗口是否可以关闭

closeAction : 'hide',

layout : 'fit',

width : 300,

height : 200,

plain : true,

items : [ {

id : 'tree-window-view',

border : false

} ]

});

        

treepanel.on('contextmenu', treeContextHandler);

// 拖拽后

treepanel.on('beforemovenode', function(tree, node, oldParent,

newParent, index) {

// alert(tree + '-' + node + '-' + oldParent + '-' + newParent + '-'

// + index);

// TODO 存储入库的操作

});

// 拖拽判断，用于处理叶节目不能append的问题

treepanel.on('nodedragover', function(e) {

var n = e.target;

if (n.leaf) {

n.leaf = false;

}

return true;

});




// treeEditor.on('complete', function(o, newText, oldText) {

//  alert('执行我啊，编辑器处理玩了');

//  Ext.Ajax.request({

// url:'addchildnode.action',

// params:{

//     newname:newText,

// nodeId:currentId,

// oldname:oldValue

// }

//  });

// },this,true);

var pid;

var flag;

treeEditor.on("complete", function(treeEditor){

  alert(treeEditor.editNode.text);

  var ppid=pid==null?treeEditor.editNode.id:pid;

  var fflag=flag==null?'modify':flag;

          Ext.Ajax.request({

url:"addnode.action",

params:{

    newname:treeEditor.editNode.text,

    sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

});

      });




// 绑定节点右键菜单功能

function treeContextHandler(node, event) {

event.preventDefault();//一说是组织浏览器的默认右键事件，二说是防止两次出现右键画面（怎么可能出现两次）

node.select();//选中右键单击的节点,有了它才有了希望

contextMenu.show(node.ui.getAnchor());

this.createrightClick(node).showAt(event.getXY());//在你右键单击的地方出现

}

// 插入子节点

function addHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

pid=selectedNode.id;

flag='add';

selectedNode.leaf = false;

selectedNode.expand(false, true, function() {

// 注意，应该先由expand展开非叶子节点，才能为之插入子节点，否则会出错

selectedNode.appendChild(newNode);

treepanel.getSelectionModel().select(newNode);

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);



});

}

function addBrotherHandler() {

var newNode = new Ext.tree.TreeNode( {

text : '新建节点'

});

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

var selectedParentNode = selectedNode.parentNode;

pid=selectedParentNode.id;

flag='add';

if (selectedParentNode == null) {

selectedNode.appendChild(newNode);

} else {

selectedParentNode.insertBefore(newNode, selectedNode);

}

setTimeout(function() {

treeEditor.editNode = newNode;

treeEditor.startEdit(newNode.ui.textNode);

}, 10);

}

function deleteHandler() {

var nodeid=treepanel.getSelectionModel().getSelectedNode().id;

var pnodeid=treepanel.getSelectionModel().getSelectedNode().parentNode.id;

//document.location.href="deletenode.action?nodeId="+nodeid+"&oldParentId="+pnodeid;

alert(nodeid+"==="+pnodeid);

          Ext.Ajax.request({

url:'deletenode.action',

params:{

nodeId:nodeid,

oldParentId:pnodeid

}

});

treepanel.getSelectionModel().getSelectedNode().remove();



}

function modifyHandler() {

var selectedNode = treepanel.getSelectionModel().getSelectedNode();// 得到选中的节点

pid=selectedNode.id;

flag='modify';

treeEditor.editNode = selectedNode;

treeEditor.startEdit(selectedNode.ui.textNode);

}

function viewHandler() {

var viewPanel = Ext.getCmp('tree-window-view');

var selectedNode = treepanel.getSelectionModel().getSelectedNode();

// 得到选中的节点

var tmpid = selectedNode.attributes.id;

var tmpname = selectedNode.attributes.text;

var tmpdes = selectedNode.attributes.description;

var tmphref = selectedNode.attributes.href;




win.setTitle(tmpname + '的介绍');

win.show();




var dataObj = {

id : tmpid,

name : tmpname,

des : tmpdes,

href : tmphref

}

var tmpTpl = new Ext.Template(

['<div style="margin:10px"><div style="margin:10px">编号:{id}</div>',

'<div style="margin:10px">名称:{name}</div>',

'<div style="margin:10px">描述:{des}</div>',

'<div style="margin:10px">链接:{href}</div></div></div>' ]);

tmpTpl.overwrite(viewPanel.body, dataObj);

}

// function myEditor(editor, newValue, oldValue) {

//

//// Ext.Ajax.request({

//// url:'addchildnode.action',

//// params:{

//// newname:newValue,

//// nodeId:currentId,

//// }

////     });

//     }  







});



后续说明，Ext中所有几乎涉及到与数据库有关又不知道改怎么办的时候，就在触发事件的处理方法中写上
Java代码
<SPAN style="FONT-SIZE: medium">Ext.Ajax.request({  
 
url:"addnode.action",  
 
params:{  
 
     newname:treeEditor.editNode.text,  
 
     sign:fflag,  
 
nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID  
 
}  
 
  });  
 
</SPAN> 

Ext.Ajax.request({

url:"addnode.action",

params:{

     newname:treeEditor.editNode.text,

     sign:fflag,

nodeId:ppid//这个是要新增节点的那个节点的Id,过去就是新的节点的父亲ID

}

  });

 
这样的异步请求在Ext中随处可以用到，至于后台处理代码我就不贴了，大家应该也都知道，无非是接受参数，查询数据后

以JSON格式的数据传递回来即可当然JSON数据格式必须为：[{name:'张三'},{age:34},{sex:'男'}]这样数据形式的JSON数据，希望我的树代码能对大家起到一些作用，虽然有点乱，好多注释掉的代码也是有用的，大家可以取消注释试试看效果