EXTJs4——树的应用----数据动态生成树

之前没有接触过ext4，一直看的是3，这次项目使用了4，然后发现在树的方面有蛮多地方不一样。

这次主要实现的是动态生成树，之前也做过动态生成树，但是都是后台给好数据格式，前台直接获取store。这次自己对后台给的数据进行提取，进行拼接，生成树。

原始数据如下格式：

{
"users":[
{"parentUserNo":"Zhao1","userId":"8a96c6d9437aef7d01437b547fdf0006","userName":"Zhao","userNo":"Zhao2","version":2},
{"parentUserNo":"Zhao1","userId":"8a96c6d9438a342f01438ac085020000",userName":"看看","userNo":"zhao3","version":3}
],
"ipcamsSize":3,
"userSize":2,
"ipcams":[
{"createUser":"admin","deviceId":"11111111","ipcamID":"402881e5431d363d01431d3bd45b0002","ipcamName":"信息学院"},
{"createUser":"admin","deviceId":"111222333","ipcamID":"402881e5431d1efe01431d23cfc30005","ipcamName":"大学"},
{"createUser":"admin","deviceId":"111222333","ipcamID":"402881e54365630601436564c5140001","ipcamName":"海洋学院"}
],
"msg":"数据获取成功",
"success":true
}

其中userName要作为树节点（展开，点击的时候获取类似上面格式数据动态生成其子节点）显示，userNo要作为动态点击时的参数传递。

其中ipcamName要作为树节点（叶子节点，点击的时候触发其他事件）显示，deviceId要作为动态点击时的参数传递。

实现效果图：

点击后（点击时再次请求数据动态生成子树）：

具体代码实现：

function treeInit(){
Ext.Ajax.request({
url: 'http://localhost:8080/horizonline/phone/queryUsersIpcamsTree.action',   //数据请求action
params: {
userNo: 'zhao1'
},
success: function(response){
var text = response.responseText;
var res = eval("(" + text + ")");      //String转换为Object
if(res.success){
var xxMenuArr = [];   //保存所有子节点
for(var i=0; i<res.users.length; i++){        //用户节点
var treeNode = generateUserNode(res.users[i]);
xxMenuArr.push(treeNode);
}
for(var i=0; i<res.ipcams.length; i++){   //视频节点
var treeNode = generateIpNode(res.ipcams[i]);
xxMenuArr.push(treeNode);
}
}
var xxTreeStore = Ext.create('Ext.data.TreeStore', {   //tree数据源
root: {
expanded: true,
children: xxMenuArr  //生成子节点
}
});
var tree = Ext.create('Ext.tree.Panel', {   //树面板
id: 'xxTreePanel',
store:xxTreeStore ,    
rootVisible: false,   //跟不可见
renderTo: "treeDiv",   //渲染
border:false   //不显示边框
});
tree.on('itemclick', function(view, record, item, index, e ) {     //添加单击事件

//record表示当前点击节点信息

if(record.data.leaf){    //叶子节点
URL = record.data.qtitle;
}else{   //非叶子节点继续查询
if(record.childNodes.length == 0){   //子节点已生成
Ext.Ajax.request({
url: 'http://localhost:8080/horizonline/phone/queryUsersIpcamsTree.action',   //再次请求
params: {
userNo: record.data.qtitle   //当前点击节点id
},
success: function(response){
var text = response.responseText;
var res = eval("(" + text + ")");    //String转换为Object
if(res.success){
var xxMenuArr = [];
for(var i=0; i<res.users.length; i++){   //生成所有用户节点
var treeNode = generateUserNode(res.users[i]);
xxMenuArr.push(treeNode);
}
for(var i=0; i<res.ipcams.length; i++){  //生成所有摄像头节点
var treeNode = generateIpNode(res.ipcams[i]);
xxMenuArr.push(treeNode);
}
record.appendChild(xxMenuArr);  //当前节点添加子节点
}
}
});
}else{

}
}
});
}
});
};
function generateUserNode(obj){   //构造用户节点函数
var nodeRoot = {
text:obj.userName,
qtitle:obj.userNo,   //无用属性，传参使用，点击时可以获取的id
expanded: true,
iconCls:"leftMenuIcon"
}
return nodeRoot;
}
function generateIpNode(obj){  //构造摄像头节点函数
var nodeRoot = {    //ext4可以直接定义一个这种节点，作为store而不能再使用Ext.tree.TreeNode
text:obj.ipcamName,
qtitle:obj.deviceId,   //无用属性，传参使用，点击时可以获取的id
expanded: true,
iconCls:"leftMenuIcon",
leaf: true  
}
return nodeRoot;
}