ExtJs 入门教程十八[树：TreePanel]

最新推荐文章于 2021-02-23 12:24:55 发布

u014490157

最新推荐文章于 2021-02-23 12:24:55 发布

阅读量426

点赞数

1.代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <!--ExtJs框架开始-->
 6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
 7     <script type="text/javascript" src="/Ext/ext-all.js"></script>
 8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
 9     <style type="text/css">
10         .nodeicon
11         {
12             background-image: url(image/user.gif) !important;
13         }
14     </style>
15     <!--ExtJs框架结束-->
16     <script type="text/javascript">
17         Ext.onReady(function () {
18             //树的节点数据源
19             var node = {
20                 text: '根',
21                 expanded: true,
22                 leaf: false,
23                 children: [
24                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
25                     { text: '根下节点二', leaf: true },
26                     { text: '根下节点三', leaf: false, children: [
27                         { text: '节点三子节点一', leaf: true },
28                         { text: '节点三子节点二', leaf: false, expanded: true, children: [
29                             { text: '节点三子节点二节点一', leaf: true },
30                             { text: '节点三子节点二节点二', leaf: true }
31                         ]
32                         }
33                     ]
34                     }
35                 ]
36             };
37             //树面板(本地数据源)
38             var treelocal = new Ext.tree.TreePanel({
39                 title: 'TreePanelLocal',
40                 //rootVisible: false,
41                 root: node
42             });
43             //树面板(服务器数据源)
44             var treeservice = new Ext.tree.TreePanel({
45                 title: 'TreePanelService',
46                 root: { text: '根', expanded: true },
47                 //rootVisible: false,
48                 loader: new Ext.tree.TreeLoader({
49                     url: '/App_Ashx/Demo/Tree.ashx'
50                 })
51             });
52             //单表
53             var form = new Ext.form.FormPanel({
54                 frame: true,
55                 title: '表单标题',
56                 style: 'margin:10px',
57                 items: [treelocal, treeservice],
58                 buttons: [{
59                     text: '获取选中项',
60                     handler: function () {
61                         selectNode = treelocal.getSelectionModel().getSelectedNode();
62                         alert('TreePanelLocal：' + (selectNode == null ? treelocal.root.text : selectNode.text));
63                     }
64                 }]
65             });
66             //窗体
67             var win = new Ext.Window({
68                 title: '窗口',
69                 width: 476,
70                 height: 574,
71                 resizable: true,
72                 modal: true,
73                 closable: true,
74                 maximizable: true,
75                 minimizable: true,
76                 items: form
77             });
78             win.show();
79         });
80     </script>
81 </head>
82 <body>
83     <!--
84 说明：
85 (1)var tree = new Ext.tree.TreePanel():创建一个新的TreePanel表单对象。
86 (2)root: node：根节点。
87 (3)expanded: true:是否展开子节点，默认为false，如“根下节点三”。
88 (4)leaf: true：是否为叶子节点，这个要注意下，如果设置为false但没有 children 那么会产生一直读取子节点的展示。
89 (5)//rootVisible: false：有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。
90 (6)loader: new Ext.tree.TreeLoader({
91                     url: '/App_Ashx/Demo/Tree.ashx'
92                 })
93    树的数据载入组件，通过url寻找service端返回的json,并且自动转换成 TreeNode。
94 (7)iconCls: 'nodeicon'：ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标。
95 (8)selectNode = treelocal.getSelectionModel().getSelectedNode()：获取选中项。
96 -->
97 </body>
98 </html>

用到后台代码如下/App_Ashx/Demo/Tree.ashx：

 1 using System.Web;
 2 
 3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
 4 {
 5     public class Tree : IHttpHandler
 6     {
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             string strResult = @"[
10                     { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
11                     { text: '根下节点二', leaf: true },
12                     { text: '根下节点三', leaf: false, children: [
13                         { text: '节点三子节点一', leaf: true },
14                         { text: '节点三子节点二', leaf: false, expanded: true, children: [
15                             { text: '节点三子节点二节点一', leaf: true },
16                             { text: '节点三子节点二节点二', leaf: true }
17                         ]
18                         }
19                     ]
20                     }
21                 ]";
22             context.Response.Write(strResult);
23         }
24 
25         public bool IsReusable
26         {
27             get
28             {
29                 return false;
30             }
31         }
32     }
33 }