『ExtJS』树异步加载数据

几点说明

这只是个最简单的版本
更复杂的暂时没想到要复杂到什么程度……
其中涉及到了
1. 使用 Ext.Ajax.request 对树进行动态加载
2. 在树的配置中加入 listeners 事件侦听，从而实现「单击节点 –> 触发事件」的功能
这里使用的是 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 
4 
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

posted @ 2012-02-14 18:17 莫不逢阅读(6548) 评论(1) 编辑收藏举报

刷新页面返回顶部

峻之岭峰

业精于勤而荒于嬉。

『ExtJS』树异步加载数据

峻之岭峰

业精于勤而荒于嬉。

『ExtJS』树 异步加载数据

『ExtJS』树异步加载数据