无废话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.  效果如下:


无废话ExtJs 系列教程十五[树:TreePanel]
 

 4. 源代码:

index.jsp

study/treePanel.js

 

 

 

 

 

 

你可能感兴趣的:(TreePanel)