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 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 200, 12 height: 150, 13 renderTo: Ext.getBody(), 14 fields: ["name", "description"], 15 columns: [{ 16 xtype: "treecolumn", // 树状表格列 17 text: "名称", 18 dataIndex: "name", 19 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、带复选框的树
代码：