Ext.tree.Panel示例

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 runat="server">
 4     <title>Ext.tree.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var tree = Ext.create("Ext.tree.Panel", {
10                 title: "Tree示例",
11                 width: 150,
12                 height: 100,
13                 renderTo: Ext.getBody(),
14                 root: {
15                     text: "根",
16                     expanded: true,
17                     children: [{
18                         text: "叶子1",
19                         leaf: true
20                     }, {
21                         text: "叶子2",
22                         leaf: true
23                     }]
24                 }
25             });
26         });
27     </script>
28 </head>
29 <body style="margin: 10px;">
30 </body>
31 </html>

效果图：

 

2、多列树

代码：

 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 runat="server">
 4     <title>Ext.tree.Panel</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var tree = Ext.create("Ext.tree.Panel", {
10                 title: "Tree多列示例",
11                 width: 200,
12                 height: 150,
13                 renderTo: Ext.getBody(),
14                 fields: ["name", "description"],
15                 columns: [{
16                     xtype: "treecolumn", // 树状表格列
17                     text: "名称",
18                     dataIndex: "name",
19                     width: 100,
20                     sortable: true
21                 }, {
22                     text: "描述",
23                     dataIndex: "description",
24                     flex: 1,
25                     sortable: true
26                 }],
27                 root: {
28                     name: "根",
29                     description: "根描述",
30                     expanded: true,
31                     children: [{
32                         name: "叶子1",
33                         description: "叶子1描述",
34                         leaf: true
35                     }, {
36                         name: "叶子2",
37                         description: "叶子2描述",
38                         leaf: true
39                     }]
40                 }
41             });
42         });
43     </script>
44 </head>
45 <body style="margin: 10px;">
46 </body>
47 </html>

效果图：

 

3、带复选框的树

代码：

posted @ 2012-04-11 13:37  libingql  阅读(6799)  评论(0)  编辑  收藏  举报