extjs技术之tree技术分析事件触发　

<script type="text/javascript">
var Tree = Ext.tree;
var tree = null;
Ext.onReady(function(){
tree = new Tree.TreePanel({
el:'tree-div',
onlyLeafCheckable:false,
rootVisible: true,
autoScroll:true,
animate:false,//是否动画
enableDD:true,// 是否支持拖放
containerScroll:true,
lines:true,
checkModel:'cascade',
loader:new Tree.TreeLoader({dataUrl:"json.jsp",
baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI}
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: '常量科目维护',
id:'root'
});

//绑定节点追加事件
tree.on('append', function(tree, node){
//if(node.id == 'foo'){
// alert("append");
// }
});

//绑定节点切换事件
tree.getSelectionModel().on('selectionchange', function(sm, node){
// alert("selectionchange");
});

//绑定节点点击事件
tree.on('click', function(node){
if(node.id!='root'){
alert(node.id);
alert(node.text);
}
});

//绑定节点加载之前事件
tree.on('beforeload',function(node){
if(node.id!='root'){
// alert("beforeload");;
}
});

//绑定节点右键菜单功能
tree.on('contextmenu',function(node,event){
// alert("node.id="+ node.id);
event.preventDefault(); //这行是必须的
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
});

//绑定节点拖动事件，找了很久树节点拖动的实现，终于在老外的帖子发现上了这个实现，拖动以后所需的信息已经捕获，与后台联动的函数 加上即可实现TREE的拖拽
function handleMoveNode(tree, node, oldParent, newParent, index) {
alert("鼠标拖拽事件");
alert("node.attributes.id = " + node.attributes.id +"/n" + "node.parentNode.attributes.id = " + node.parentNode.attributes.id )
alert("newParent.attributes.id = " + newParent.attributes.id);
alert("oldParent.attributes.id = " + oldParent.attributes.id);
}

tree.addListener('movenode', handleMoveNode);
tree.addListener('beforemovenode', function(t,node,oldParent,newParent,i) {
if(oldParent.id == newParent.id ) {
alert("Re-ordering not supported");
return false;
}
});

//定义右键菜单
var rightClick = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'rMenu1',
text : '菜单1',
//增加菜单点击事件
handler:function (){
alert('我被点击了！');
}
}, {
id:'rMenu2',
text : '菜单2'
}, {
id:'rMenu3',
text : '菜单3'
}]
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
</script>