幾點說明
- 這只是個最簡單的版本
- 更復雜的暫時沒想到要復雜到什么程度……
- 其中涉及到了
- 使用 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