Extjs中动态生成树
来源:互联网 发布:逆光源网络剧未删减版 编辑:程序博客网 时间:2024/05/01 08:47
很多情况下我们需要动态生成树原因有二,其一,每个树节点的孩子数据会随时变化,其二,在数据量较大时一次性加载数据会耗费较长的时间。
先看看在动态加载树时,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());
// }
}
});
一次加载后
二次加载后
- Extjs中动态生成树
- extjs动态树的生成。
- ExtJS 中生成树
- extjs 开始菜单动态生成
- Extjs 动态生成表格
- Extjs动态生成表头
- Extjs 中fields和grid的columns如何动态生成
- ExtJs GridPanel动态生成表单
- extjs desktop 菜单动态生成
- ExtJs动态grid的生成
- Extjs-Grid-动态生成columns
- extjs生成动态折线图
- Extjs结合后台数据库动态生成多层菜单树
- 【转】extjs加载json数据动态生成树
- ExtJs学习笔记 根据数据库生成动态多级树
- ExtJs学习笔记 根据数据库生成动态多级树
- ExtJs学习笔记 根据数据库生成动态多级树
- ExtJs树的生成
- hdu 1008
- DBCP的配置参数
- 单片机(不基于os)下如何实现简单的内存管理(malloc,realloc和free函数的重新实现)
- HTTP 返回码
- 创建流体
- Extjs中动态生成树
- 广告投放系统(openx)
- 观察者模式【Observer Pattern】
- 指针函数和函数指针的区别
- android 3d游戏研究(二)(边学边写,多谢高手指正,鞠躬) :数据库
- pl/sql中模拟登录Oracle EBS并获得职责 .
- UML类图关系大全
- How to set the current user on the model instance in the admin:
- C++中string erase函数的使用