当前位置:编程问答 > JS >

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 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,