无废话ExtJs 入门教程十八[树：TreePanel]
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 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 () { 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 }; treelocal = new Ext.tree.TreePanel({ 39 title: 'TreePanelLocal', root: node 42 }); treeservice = new Ext.tree.TreePanel({ 45 title: 'TreePanelService', 46 root: { text: '根', expanded: true }, loader: new Ext.tree.TreeLoader({ 49 url: '/App_Ashx/Demo/Tree.ashx' 50 }) 51 }); 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 }); 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 那么会产生一直读取子节点的展示。 (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：
相关文章
精彩导读
热门资讯
关注我们
