Extjs中动态生成树

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

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

// 的TreeStore(第一棵树)
var businessTreeStore = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : serviceUrl//加载数据的路径
}, www.zzzyk.com
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());
// }
}
});

一次加载后

二次加载后

补充：web前端 , JavaScript ,