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>

效果图:

Ext.tree.Panel示例

 

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>

效果图:

Ext.tree.Panel示例

 

3、带复选框的树

代码:

你可能感兴趣的:(Panel)