无废屁ExtJs 系列教程十五[树:TreePanel]
无废话ExtJs 系列教程十五[树:TreePanel]
1. index.jsp代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'index.jsp' starting page</title> <!--ExtJs框架开始--> <script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="Ext/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> <!--ExtJs框架结束--> <!-- <script type="text/javascript" src="study/helloWorld.js"></script> <script type="text/javascript" src='study/window.js'></script> <script type="text/javascript" src='study/formPanel.js'></script> <script type="text/javascript" src='study/textField.js'></script> <script type="text/javascript" src='study/button.js'></script> <script type="text/javascript" src='study/login.js'></script> --> <!--调用/study/gridPanel_columnModel.js 实现树 --> <script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js--> <script type="text/javascript" src="study/kindeditor/kindeditor.js"></script> <script type="text/javascript" src='study/treePanel.js'></script> <style type="text/css"> .loginicon { background-image: url(study/login.gif) !important; } </style> <style type='text/css'> .x-form-unit { height:22px; line-height:22px; padding-left:2px; display:inline-block; display:inline; } </style> </head> <body> <!--------------------- 上层 --> <!-- 这里使用ContainerLayout: 垂直方式布局 --> <div id='ContainerLayout' style='float:left;width:300px'></div> <!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 --> <div id='hello' style='float:left;width:300px;padding-left: 10px'></div> <div id='right-upward' style='float:left;width:700px;padding-left:15px'></div> <!--------------------- 中间------------------------------------> <div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div> <!--------------------- 底层------------------------------------> <div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div> <!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 --> <div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div> <!-- 表格布局 --> <div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div> </body> </html>
2. treePanel.js 代码如下:
Ext.onReady(function(){ var node = { text:'根', expanded:true, //是否展开子节点,默认为false,子节点不会被展开,表示默认卷是打开状态 leaf:false, //是否为叶子节点,这个要注意下,如果设置为false但没有 children 那么会产生一直读取子节点的展示 children:[ { text:'根下节点一[user图标]', leaf:true, iconCls:'nodeicon' //ExtJs自带的图标显示为“文件夹”或是“列表”,通过 iconCls 可以列换树型菜单的图标。 }, { text:'根下节点二', leaf:true, iconCls:'nodeicon' }, { text:'根下节点三', leaf:false, expanded:false, children:[ { text:'节点三子节点一', leaf:true }, { text:'节点三 子节点二', leaf:false, expanded:true, children:[ { text:'节点三 子节点二节点一', leaf:true }, { text:'节点三 子节点二节点二', leaf:true } ] } ] } ] } //树面板(本地数据源) var treeLocal = new Ext.tree.TreePanel({ //创建一个TreePanel对象 title:'TreePanelLocal', root:node //根节点 }); //树面板(服务器数据源) var treeService = new Ext.tree.TreePanel({ title:'TreePanelLocal', rootVisible:false, //有时候我们不想显示根节点,可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。 root:node, //根节点 loader: new Ext.tree.TreeLoader({ url: '暂时未实现此功能' //树的数据载入组件,通过url寻找service端返回的json,并且自动转换成 TreeNode。 }) }); var form = new Ext.form.FormPanel({ items: [treeLocal, treeService], style:'margin:10px', buttons:[ new Ext.Button({ text:'Submit', handler:function(){ selectNode = treeLocal.getSelectionModel().getSelectedNode(); //获取选中项。 alert('TreePanelLocal:' + (selectNode == null ? treeLocal.root.text : selectNode.text)); } }) ], //height:400, frame:true }); //窗口 new Ext.Window({ title:'窗体', modal:true, width:470, height:570, items:form }).show(); })
3. 效果如下:
4. 源代码:
index.jsp
study/treePanel.js