ExtJs treepanel和TabPanel配合使用

浏览数：29 / 时间：2015年06月09日

tree.js

Ext.onReady(function() {
			Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
			var center = new Ext.TabPanel(
					{
						id : 'tab_main',
						region : 'center',
						frame : false,
						items : [ {
							id : 'welcome',
							title : '首页',
							html : "<iframe src='welcome.jsp' width='100%' height='100%' frameboder='0' srcolling='auto''/>"
						} ],
						enableTabSrocll : true
					});
			center.setActiveTab('welcome');

			var tree = new Ext.tree.TreePanel(
					{
						title : '主菜单',
						width : 200,
						autoSrocll : true,
						singleExpand : true,
						rootVisible : true,
						animate : true,
						loader : new Ext.tree.TreeLoader({
							dataUrl : 'tree.asp'
						}),
						listeners : {
							click : function(node) {
								var url = node.attributes.url;
								var id = node.attributes.id;
								var tab = center.getItem('tab_' + id);
								if (url) {
									if (tab) {
										center.setActiveTab(tab);
									} else {
										tab = new Ext.Panel(
												{
													title : node.attributes.text,
													html : "<iframe src='"
															+ url
															+ "' width='100%' height='100%' frameboder='0' srcolling='auto'/>",
													closable : true,
													layout : 'fit',
													frame : false,
													id : 'tab_' + id
												});
										center.add(tab);
										center.setActiveTab(tab);
									}
								}
							}
						}
					});

			var root = new Ext.tree.AsyncTreeNode({
				id : 'root',
				text : '根',
				expanded : true
			});
			tree.setRootNode(root);

			new Ext.Viewport({
				layout : "border",
				items : [ {
					region : 'west',
					items : tree,
					layout : 'fit',
					width : 200
				}, {
					region : 'center',
					layout : 'fit',
					autoScroll : true,
					id : 'centerPanel',
					items : center
				} ]
			});
		});

index.html

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/tree.js"></script>

</head>
<body>
	<div id="div"></div>
</body>
</html>

TreeAction.java

package com.lin.action;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class TreeAction extends ActionSupport {
	private String node;

	public String getNode() {
		return node;
	}

	public void setNode(String node) {
		this.node = node;
	}

	@Override
	public String execute() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/json; charset=utf-8");
		PrintWriter pw = response.getWriter();
		System.out.println(node);
		if ("root".equals(node)) {
			pw.append("[{id:'module1',text:'模块1',leaf:false},{id:'module2',text:'模块2',leaf:true,url:'module2.jsp'}]");
		} else {
			pw.append("[{id:'module3',text:'模块3',leaf:true,url:'module3.jsp'}]");
		}
		pw.flush();
		pw.close();
		return NONE;
	}
}

实现效果：