目的:将一个文件夹下的所有文件和子文件 以树的形式显示在网页中,类似于资源管理器
前台代码
var store2 = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: '../TreeTest.ashx' }, fields:['id','text']//跟旧版本extjs一样,节点的id和显示文本 }); var AsyncTree2 = Ext.create("Ext.tree.Panel",{ title: 'Simple Tree2', 300, height:300, collapsible: true, singleExpand: true, useArrows: true, root: { id:1, text: "hehe", expanded: true }, store:store2, renderTo: 'tree-div', listeners:{ 'beforeitemexpand':function(node,optd) { if(node.data.text=='总公司') { } else { // node.leaf=true } } } }); });
后台代码
public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; // context.Request.Params["bumen"]; ; string id = context.Request.Params["node"]; string result = ""; if (id == "1") { result = "[{'text':'总公司','id':100}]"; } else if (id == "100") { result = "[{'text':'分公司一','id':110,leaf:true},{'text':'分公司二','id':120}]"; } else if (id == "120") { result = "[{'text':'部分一','id':1200,leaf:true},{'text':'部门二','id':1300,leaf:true}]"; } context.Response.Write(result); }
扩展,每个节点展开时,如何改变每次服务请求的URL 地址,extraParams 参数值,在beforeitemexpand事件中,调用store.setProxy()方法
listeners:{ 'beforeitemexpand':function(node,optd) { if(node.data.text=='总公司') { var tt=node.data.text; var mystore=AsyncTree2.getStore() // mystore.proxy.url='../TreeTest.ashx?aa==vv' // mystore.load(); mystore.setProxy({ type:'ajax', url:'../TreeTest11.ashx' , extraParams:{time:tt} }) } else { // node.leaf=true } } }