>>>

幾點說明

1. 這只是個最簡單的版本
2. 更復雜的暫時沒想到要複雜到什麼程度……
3. 其中涉及到了
   1. 使用 Ext.Ajax.request 對樹進行動態載入
   2. 在 樹 的配置中加入 listeners 事件偵聽，從而實現「單擊節點 –> 觸發事件」的功能
4. 這裡使用的是 ExtJS 4.0.7 版本，在事件方面與 3.4.0 有一些差異
   1. 之所以用這個版本，是因為有人問到了「ExtJS4下樹動態載入」，所以就用這個版本的寫了
   2. 這裡我會用 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 >

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

說明：

1. JScript1.js
   1. 這裡的Ext.tree.panel就是3.4.0中的TreePanel
   2. 這裡的itemclick事件，就是3.4.0中的click事件
   3. 在listeners偵聽中，可以使用 record.data.XXX 來判斷當前點選的節點是不是想要的節點
      1. 個人總覺得這會存在什麼問題……
      2. 但是還沒找到更好的方法……
      3. 不要輕易使用 index 來確定節點，不然很可能會悲劇，這個是可以預見的~
   4. store 使用的是 Ext.data.TreeStore 型別的
      1. 使用 setRootNode() 方法來載入相應資料

1. Tree_DataStore_Load_4.aspx.cs
   1. 這裡由於要使用多級節點，所以使用了巢狀的類定義方法
   2. 如果想要的更多的級別，可以add更多
   3. 最後一層的leaf屬性，必須為true，因為要標識這個是最後一個葉子，面不是樹枝
      1. 也就是說，在它上一層的，都要為false，或者不設定這個屬性
   4. extended 這個屬性是表示是否載入後就展開，如果為 true ，則表示展開，預設為 false

轉載於:https://my.oschina.net/skyler/blog/706173