Extjs中TreePanel树异步加载数据的步骤

Extjs中TreePanel树异步加载数据的步骤

 

1.定义根节点root：

var myRoot = new Ext.tree.AsyncTreeNode({
     text:"根节点",
     draggable:false,   //根节点不可拖动
     expanded:true,    //根节点展开
});

 

2.定义数据加载器TreeLoader：

var myLoader = Ext.tree.TreeLoader({
     dataUrl:"getTree.do?doType=getTreeById",   
     baseParams:{name:""},
     baseAttrs:{uiprovider:Ext.tree.TreeCheckNodeUI}//必须有该项，不然树节点无法出现选择框
});

注意：url属性名称为：dataUrl  (store的是url)

 

3.定义数据加载前触发方法：beforeload

myLoader.on("beforeload",function(treeLoader,node){
      treeLoader.baseParams.pid = node.id;
},this);

4.定义树面板，用于显示数据：

var myTree = new Ext.tree.TreePanel({
	root: myRoot, 
	loader:myLoader,
	checkModel: 'multiple',   	//复选框多选
	animate:false,				//无动画
	onlyLeafCheckable: true,
	enableDD:false,    			//子节点不能拖动
	border:false,           	
	rootVisible:true,  			//根节点可见
	autoScroll :true,
	lines: false,				//节点间用线连接
	tbar:[
	      {
	    	  xtype:'label',
	    	  text:"文件号："
	      },{
	    	  xtype:"textfield",
	    	  id:"serchFor5",
	    	  allowBland:true,
	    	  width:120
	      },{
	    	  text:"查找",
	    	  iconCls:"filter",
	    	  handler : function(){
		        	cNode = departTree.getSelectionModel().getSelectedNode();
		        	var selectedNodeID;
		        	if(cNode){
		        		selectedNodeID = cNode.id;
		        	}
		        	var searchFor = Ext.getCmp("searchFor5").getValue();
		    		if(searchFor=='') return;
		    		var startNodeID = null; //New search 新的查找
		    		if(lastSearch != '' && lastSearch == searchFor) {// Find next 查找下一个
		    			if(selectedNodeID && selectedNodeID != 'tree-root'){
		    	 			startNodeID = selectedNodeID ;
		    			}
		        	}
		    	 	lastSearch = searchFor;
		    		//调用服务端查找
		    		Ext.Ajax.request({
		    			url : 'getIndustry.base?doType=searchPolicy',
		    			params : {searchFor: searchFor, startID :startNodeID},
		    			success : onSearchSuccessCallback,
		    			failure : function(response,option) {
		    				Ext.Msg.alert("失败","查找过程发生错误！");		
		                }
		    		});
		        }
	      }
  	]
});

 

 
           
 

 

后台获取数据代码：TODO......