目的:將一個文件夾下的所有文件和子文件 以樹的形式顯示在網頁中,類似於資源管理器
前台代碼
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', width: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 } } }