标签:style blog http java 使用 os io 2014
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
} ]
});
});
<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;
}
}
实现效果:
ExtJs treepanel和TabPanel配合使用,布布扣,bubuko.com
标签:style blog http java 使用 os io 2014
原文地址:http://blog.csdn.net/hackcoder/article/details/38489083