几点说明
- 这只是个最简单的版本
- 更复杂的暂时没想到要复杂到什么程度……
- 其中涉及到了
- 使用 Ext.Ajax.request 对树进行动态加载
- 在 树 的配置中加入 listeners 事件侦听，从而实现「单击节点 –> 触发事件」的功能
- 这里使用的是 ExtJS 4.0.7 版本，在事件方面与 3.4.0 有一些差异
- 之所以用这个版本，是因为有人问到了「ExtJS4下树动态加载」，所以就用这个版本的写了
- 这里我会用 3.4.0 重写，不过就不一定会是什么时间了，如果没人问，估计写到这里要好久了……
效果图
浏览器：Opera 11
代码
IDE：VS2008
ExtJS：4.0.7
JScript1.js
1 Ext.onReady(function(){
2 Ext.QuickTips.init();
3
4 var store = Ext.create('Ext.data.TreeStore', {
5 root: {
6 expanded: true
7 }
8 });
9
10 var cmp1 = Ext.create('Ext.tree.Panel', {
11 title: '『ExtJS』树 异步加载数据 —— http://www.cnblogs.com/sitemanager',
12 width: 200,
13 height: 400,
14 store: store,
15 rootVisible: false,
16 renderTo: Ext.getBody(),
17 listeners: {
18 itemclick: function(view, record, item, index, e){
19 if(record.data.text == 'text1'){
20 Ext.Msg.alert(record.data.text,index);
21 }
22 else{
23 Ext.Msg.alert(record.data.text,index);
24 }
25 }
26 }27 });
28
29 Ext.Ajax.request({
30 url: 'Tree_DataStore_Load_4.aspx',
31 success: function(response,options){
32 var json = Ext.decode(response.responseText);
33 store.setRootNode(json);
34 Ext.Msg.alert('成功！','『ExtJS』树 异步加载数据 —— http://www.cnblogs.com/sitemanager');
35 },
36 failure: function(response,options){
37 Ext.Msg.alert('出错啦！！！','Axax请求后台出错！看看是不是地址错了？');
38 }
39 });
40 });
designer.html
1 <!DOCTYPE html>
2
3 <!-- Auto Generated with Ext Designer -->
4 <!-- Modifications to this file will be overwritten. -->
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>『ExtJS』树 异步加载数据 —— http://www.cnblogs.com/sitemanager</title>
9 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
10 <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>
11
12 <script src="app/JScript1.js" type="text/javascript"></script>
13 </head>
14 <body></body>
15 </html>
Tree_DataStore_Load_4.aspx.cs
1 using System;
2 using System.Collections.Generic;
3 using System.Web.Script.Serialization;
4
5 namespace csdemo2008.ExtJS.Tree_DataStore_Load_4
6 {
7 public partial class Tree_DataStore_Load_4 : System.Web.UI.Page
8 {
9 protected void Page_Load(object sender, EventArgs e)
10 {
11 Tree_DataStore_Load_4_Node node1 = new Tree_DataStore_Load_4_Node();
12 node1.text = "text1";
13
14 Tree_DataStore_Load_4_Node node2 = new Tree_DataStore_Load_4_Node();
15 node2.text = "text2";
16 node2.leaf = true;
17
18 node1.children = new List<Tree_DataStore_Load_4_Node>();
19 node1.children.Add(node2);
20 node1.children.Add(node2);
21 node1.children.Add(node2);
22
23 Tree_DataStore_Load_4_Store store = new Tree_DataStore_Load_4_Store();
24 store.success = true;
25 store.expanded = true;
26 store.children = new List<Tree_DataStore_Load_4_Node>();
27 store.children.Add(node1);
28 store.children.Add(node1);
29 store.children.Add(node1);
30
31 JavaScriptSerializer js = new JavaScriptSerializer();
32
33 Response.Write(js.Serialize(store));
34 }
35 }
36
37 class Tree_DataStore_Load_4_Store
38 {
39 private bool _success;
40
41 public bool success
42 {
43 get { return _success; }
44 set { _success = value; }
45 }
46 private string _errorMsg;
47
48 public string errorMsg
49 {
50 get { return _errorMsg; }
51 set { _errorMsg = value; }
52 }
53
54 private bool _expanded;
55
56 public bool expanded
57 {
58 get { return _expanded; }
59 set { _expanded = value; }
60 }
61 private IList<Tree_DataStore_Load_4_Node> _children;
62
63 public IList<Tree_DataStore_Load_4_Node> children
64 {
65 get { return _children; }
66 set { _children = value; }
67 }
68 }
69
70 class Tree_DataStore_Load_4_Node
71 {
72
73 private bool _expanded;
74 public bool expanded
75 {
76 get { return _expanded; }
77 set { _expanded = value; }
78 }
79 private string _text;
80
81 public string text
82 {
83 get { return _text; }
84 set { _text = value; }
85 }
86 private bool _leaf;
87
88 public bool leaf
89 {
90 get { return _leaf; }
91 set { _leaf = value; }
92 }
93 private IList<Tree_DataStore_Load_4_Node> _children;
94
95 public IList<Tree_DataStore_Load_4_Node> children
96 {
97 get { return _children; }
98 set { _children = value; }
99 }
100 }
101 }
102
说明：
- JScript1.js
- 这里的Ext.tree.panel就是3.4.0中的TreePanel
- 这里的itemclick事件，就是3.4.0中的click事件
- 在listeners侦听中，可以使用 record.data.XXX 来判断当前点击的节点是不是想要的节点
- 个人总觉得这会存在什么问题……
- 但是还没找到更好的方法……
- 不要轻易使用 index 来确定节点，不然很可能会悲剧，这个是可以预见的~
- store 使用的是 Ext.data.TreeStore 类型的
- 使用 setRootNode() 方法来加载相应数据
- Tree_DataStore_Load_4.aspx.cs
- 这里由于要使用多级节点，所以使用了嵌套的类定义方法
- 如果想要的更多的级别，可以add更多
- 最后一层的leaf属性，必须为true，因为要标识这个是最后一个叶子，面不是树枝
- 也就是说，在它上一层的，都要为false，或者不设置这个属性
- extended 这个属性是表示是否加载后就展开，如果为 true ，则表示展开，默认为 false