『ExtJS』树 异步加载数据

几点说明

---

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 >

 

 

 

 

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

 

 

说明：

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://www.cnblogs.com/sitemanager/archive/2012/02/14/2351699.html