There are two ways to create a navigation tree in EXT: 1. Read all the data first, and then bind to the foreground page. 2, each click of a node expansion after the child node loading. It's faster to use the first method when the amount of data is small, but I recommend the second way when the amount of data is large. Here I would like to introduce the second kind of tree display way.
The Source:
1 //Create Model 2 ext.define ("TreeModel",{ 3 Extend: "Ext.data.Model", 4 fields:["Ouid", "Ouname"] 5 }) 6 //Create Store 7 var treestore=ext.create (" Ext.data.TreeStore ",{ 8 model:" TreeModel ", 9 proxy:{10 type:" Ajax ", 11 URL: "treehandler.ashx",12 extraparams:{pid:0}13 },14 listeners:{15 beforeexpand: function (node) 16 {17 This.proxy.extraparams.pid=node.raw.ouid; 18 }19 },20 autoload:true21 }) 22 //Create Tree 23 var tree=ext.create (" Ext.tree.Panel ",{24 store:treeStore,25 userArrows:true,26 rootvisible:false, 27 name: "Ouid", 28 displayfield: "Ouname",29 valuefield: "Ouid",30 listeners:{31 itemclick:function (view,rec) 32 {33 34&N Bsp }35 }36 })
ExtJS creating a dynamic load tree