Extjs4学习资料(TreeStore使用)

Extjs4学习资料(TreeStore使用)

Extjs4中对使用的TreeStore时，常常摆在眼前的问题是如何加载数据，从加载的方式上来说，可以分为两类：异步加载和全部加载。

异步加载

 异步加载的好处主要是，需要数据的时候才从后台请求，每次加载的数据量少，加快了页面初始化速度，用户体验较好，异步加载的方式可以按照如下方式定义：

1.定义Store

Ext.define('App.system.TreeStore', {    extend: 'Ext.data.TreeStore',    fields:['id','name'],    nodeParam : 'parentId',  //这个属性是异步加载主要特征，通过该节点去请求子节点    proxy : {type : 'ajax',url : 'data/treeMenu.do',reader : {type:'json'}}// 设置根节点root : {text : '根节点',id : '-1',expanded : true}});

异步加载时，按照如上形式定义好treeStore对象。

全部加载

1.定义store

var store = Ext.create('Ext.data.TreeStore',{proxy:{type:'ajax',url:'data/Myjsp.jsp',reader:{type:'json',root:'treeList'}},root:{text:'根节点',expanded:true}});

后台返回的数据格式为：

{treeList:[{text:'总公司1',id:'123',children:[{             text:'部门1',id:'234',leaf:true  }]},{text:'总公司2',id:'258'}]}  

上面这种形式是后台将树形构建好，然后返回到页面直接使用。

有时我们可以使用后台返回的｛id:"456",pid:"0"｝列表，在前台创建树，这时主要利用的两个算法：树的搜索，递归添加子节点

var treeList  = [{text:"公司1"，id:"123",pid:"0"},......]  //服务器返回的列表var treeStore = Ext.create('Ext.data.TreeStore');//递归添加子节点function insertChildren(parentId){var childList = [ ];//根据parentId父节点，查找出子节点for(var index in treeList){var treeNode = treeList[index];if (treeNode.id == parentId){childList.push(treeNode);}//如果子列表为空，则递归结束，直接返回if(childList.length == 0)return;var treeNodeInterface = treeStore.getNodeById(parentId);  //这里主要使用了Ext中的树的搜索算法，查找响应的节点，当然也可以自己实现treeNodeInterface.appendChild(childList);//遍历孩子节点列表，给每个孩子节点继续添加子节点for(var index in childList){var treeNode = childList[index];insertChildren(treeNode.id); //递归调用，插入子节点<span style="white-space:pre"></span>}<span style="white-space:pre"></span>}}