Extjs中动态生成树

很多情况下我们需要动态生成树原因有二，其一，每个树节点的孩子数据会随时变化，其二，在数据量较大时一次性加载数据会耗费较长的时间。

先看看在动态加载树时，treestore和treepanel的定义

// 的TreeStore(第一棵树)
var businessTreeStore = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : serviceUrl//加载数据的路径
},
fields : ['indexId', 'text','caseId','msgType','icon', 'leaf'],//数据项
root : {
text : proName,//树根节点的显示内容，在此proName为一个变量
id :indexId,
icon:'resources/images/pic/data-Backup.png',
expanded : true
},
folderSort : true,
sorters : [{//树节点排序设置
property : 'indexId',
direction : 'ASC'
}],
listeners : {//注意beforeload的参数，确定在点击非叶子节点时加载数据传递的参数

beforeload : function(ds, opration, opt) {
if(opration.node.data.depth==0){//以下为设置参数第一级节点加载
resultbodyValue+=planId
opration.params.headValue = resultheadValue;//其中headvalue为参数名，而resultheadValue为之前定义好的变量
opration.params.handleMsg = resulthandleMsg;
opration.params.returnMsg = returnMsgBusiness;
opration.params.bodyValue = resultbodyValue;

}else if(opration.node.data.depth==1){//第二级节点
opration.params.headValue = resultheadValue;
opration.params.handleMsg = resulthandleMsg;
opration.params.returnMsg = returnMsgProcess;
opration.params.bodyValue = resultbodyValue+"^^result.caseId:"+opration.node.data.caseId;
}
}
}
});

以下是treePanel的定义

// 业务域的目录树(第一棵树), 加载页面时显示
var businessTree = Ext.create('Ext.tree.Panel', {
id : 'Panel.BusinessTree',
title : '测试记录',
rootVisible : true,
split : true,
region : 'center',
minSize:100,
maxSize:300,
store : businessTreeStore,
listeners : {
'itemclick' : function(view, record, items, index, e) {
// 点击非叶子节点时(业务域)
if(record.data.depth==0) {

//此处根据树的节点不同添加相应的事件
}if(record.data.depth==1) {
}
else if(record.data.leaf == true){
//为叶子节点时
}
}
//},//以下为增加右键事件，具体可以根据需要改动
//'itemcontextmenu' : function(menutree, record, items, index, e) {
//e.preventDefault();
//e.stopEvent();
// if(record.data.leaf == false) {
//// 右键点击第二级业务域
//var tempmenu = new Ext.menu.Menu({
//floating : true,
//items : [{
//text : "删除业务域",
//handler : function() {
// currentNode = record;
// var con = confirm("确定删除该业务域?");
// if(con == true){
//
//var persistentId = currentNode.get('persistentId');
//var bodyDeleteBusiness = "business.persistentId:" + persistentId
//Ext.Ajax.request({
//url : "SWAPCSP.CSP.ServiceProxy.cls",
//timeout:60000,
//params : {

//},
//method : 'POST',
//success : function(response, opts) {
// currentNode.parentNode.set('expanded', false);//节点更新
//currentNode.parentNode.set('loading', false);
//currentNode.parentNode.set('loaded', false);
//currentNode.parentNode.expand();
////}
//});
//
// }else{}
//}
//}]
//});
//}
//tempmenu.showAt(e.getXY());
//}
}
});

一次加载后

二次加载后