几点说明
- 这只是个最简单的版本
- 更复杂的暂时没想到要复杂到什么程度……
- 其中涉及到了
- 使用 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