在Window中加入一些其他的控件是非常有用的,因为他展示出来的效果也是非常明显的,通过弹出框的值赋值给其他组件。所用的Extjs是3.2的。json包是fastjson-1.1.15.jar包。代码如下:
java类:
bo类:
TreeBo:
import java.util.List;
public class TreeBo {
private int id;//节点id
private String text;//节点显示名称
private String cls;//节点图标
private Boolean leaf;//是否叶子节点
private String qtip;//提示信息
private String href;
private List<TreeBo> children;//下级节点
private String military;//军区
private String fighting;//战斗力
private String uiProvider;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public Boolean getLeaf() {
return leaf;
}
public void setLeaf(Boolean leaf) {
this.leaf = leaf;
}
public List<TreeBo> getChildren() {
return children;
}
public void setChildren(List<TreeBo> children) {
this.children = children;
}
public String getQtip() {
return qtip;
}
public void setQtip(String qtip) {
this.qtip = qtip;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getMilitary() {
return military;
}
public void setMilitary(String military) {
this.military = military;
}
public String getFighting() {
return fighting;
}
public void setFighting(String fighting) {
this.fighting = fighting;
}
public String getUiProvider() {
return uiProvider;
}
public void setUiProvider(String uiProvider) {
this.uiProvider = uiProvider;
}
}
GridBo:
import java.util.List;
public class GridBo {
private int totalProperty;
private String id;
private String name;
private List root;
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List getRoot() {
return root;
}
public void setRoot(List root) {
this.root = root;
}
}
action类:
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.GridBo;
import com.test.bo.TreeBo;
public class FunctionListAction {
private List<TreeBo> treeList;
public void testTree(){
treeList = new ArrayList<TreeBo>();
TreeBo cdAllMilitary = new TreeBo();
cdAllMilitary.setText("成都军区");
cdAllMilitary.setCls("folder");
cdAllMilitary.setLeaf(false);
cdAllMilitary.setId(1);
cdAllMilitary.setQtip("司令");
treeList.add(cdAllMilitary);
List<TreeBo> cdMilitary = new ArrayList<TreeBo>();
cdAllMilitary.setChildren(cdMilitary);
TreeBo cq = new TreeBo();
cq.setText("重庆军区");
cq.setCls("folder");
cq.setLeaf(true);
cq.setId(11);
cq.setQtip("1军长");
cq.setHref("functionList.jsp");
cdMilitary.add(cq);
TreeBo km = new TreeBo();
km.setText("昆明军区");
km.setCls("folder");
km.setLeaf(true);
km.setId(12);
km.setQtip("2军长");
cdMilitary.add(km);
TreeBo bjAllMilitary = new TreeBo();
bjAllMilitary.setText("北京军区");
bjAllMilitary.setCls("folder");
bjAllMilitary.setLeaf(false);
bjAllMilitary.setId(2);
bjAllMilitary.setQtip("军委");
treeList.add(bjAllMilitary);
List<TreeBo> bjMilitary = new ArrayList<TreeBo>();
bjAllMilitary.setChildren(bjMilitary);
TreeBo bj = new TreeBo();
bj.setText("北京军区");
bj.setCls("folder");
bj.setLeaf(true);
bj.setId(21);
bj.setQtip("3军长");
bjMilitary.add(bj);
TreeBo tj = new TreeBo();
tj.setText("天津军区");
tj.setCls("folder");
tj.setLeaf(true);
tj.setId(22);
tj.setQtip("4军长");
bjMilitary.add(tj);
treeTest = JSONObject.toJSON(treeList).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(treeList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
public void grid(){
int start = Integer.parseInt(ServletActionContext.getRequest().getParameter("start"));
int limit = Integer.parseInt(ServletActionContext.getRequest().getParameter("limit"));
GridBo grid = new GridBo();
grid.setTotalProperty(100);
List list = new ArrayList();
String root = "";
for(int i = start;i < start+limit;i++){
Map obj=new HashMap();
obj.put("id", i);
obj.put("name", "name"+i);
list.add(obj);
}
grid.setRoot(list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(grid).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
struncts.xml配置:
<package name="struts2" namespace="/" extends="struts-default">
<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>
</package>
window1.js:
Ext.onReady(function(){
//tree
var tree3 = new Ext.tree.TreePanel({
autoScroll:true,
animate:true,
enableDD:true,
autoHeight:true,
autoWidth:true,
containerScroll:true,
loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})
});
var root3 = new Ext.tree.AsyncTreeNode({
text:'中国军区',
draggable:false,
id:'testTree'
});
tree3.setRootNode(root3);
//grid
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:50,sortable:true},
{header:'名称',dataIndex:'name',width:100,sortable:true}
]);
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'function_grid.action'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root',
fields:[
{name:'id'},
{name:'name'}
]})
});
var grid = new Ext.grid.GridPanel({
store:store,
cm:cm,
width:500,
autoHeight:true,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true,
enableRowBody:true,
columnsText:'显示的列',
sortAscText:'升序',
sortDescText:'降序',
scrollOffset:1
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
store.load({params:{start:0,limit:10}});
var tabs = new Ext.TabPanel({
region:'center',
defaults:{autoScroll:true},
activeTab:0,
items:[
{
title:'默认',items:[grid]
},
{
title:'标签',
html:'内容'
},
{
title:'可关闭',
html:'内容',
closable:true
}
]
});
var nav = new Ext.Panel({
title:'导航',
region:'west',
split:true,
width:200,
items:[tree3],
collapsible:true
});
var win = new Ext.Window({
title:'复杂布局',
colseable:true,
width:720,
height:330,
border:false,
layout:'border',
items:[nav,tabs]
});
win.show();
});
window1.jsp文件:
<html>
<head>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/window1.js"></script>
</head>
<body>
<div id="window-win"></div>
</body>
</html>
效果图如下:
[img]http://f.hiphotos.bdimg.com/album/pic/item/4bed2e738bd4b31c6ad5853886d6277f9f2ff84c.jpg[/img]
java类:
bo类:
TreeBo:
import java.util.List;
public class TreeBo {
private int id;//节点id
private String text;//节点显示名称
private String cls;//节点图标
private Boolean leaf;//是否叶子节点
private String qtip;//提示信息
private String href;
private List<TreeBo> children;//下级节点
private String military;//军区
private String fighting;//战斗力
private String uiProvider;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getCls() {
return cls;
}
public void setCls(String cls) {
this.cls = cls;
}
public Boolean getLeaf() {
return leaf;
}
public void setLeaf(Boolean leaf) {
this.leaf = leaf;
}
public List<TreeBo> getChildren() {
return children;
}
public void setChildren(List<TreeBo> children) {
this.children = children;
}
public String getQtip() {
return qtip;
}
public void setQtip(String qtip) {
this.qtip = qtip;
}
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getMilitary() {
return military;
}
public void setMilitary(String military) {
this.military = military;
}
public String getFighting() {
return fighting;
}
public void setFighting(String fighting) {
this.fighting = fighting;
}
public String getUiProvider() {
return uiProvider;
}
public void setUiProvider(String uiProvider) {
this.uiProvider = uiProvider;
}
}
GridBo:
import java.util.List;
public class GridBo {
private int totalProperty;
private String id;
private String name;
private List root;
public int getTotalProperty() {
return totalProperty;
}
public void setTotalProperty(int totalProperty) {
this.totalProperty = totalProperty;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List getRoot() {
return root;
}
public void setRoot(List root) {
this.root = root;
}
}
action类:
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.GridBo;
import com.test.bo.TreeBo;
public class FunctionListAction {
private List<TreeBo> treeList;
public void testTree(){
treeList = new ArrayList<TreeBo>();
TreeBo cdAllMilitary = new TreeBo();
cdAllMilitary.setText("成都军区");
cdAllMilitary.setCls("folder");
cdAllMilitary.setLeaf(false);
cdAllMilitary.setId(1);
cdAllMilitary.setQtip("司令");
treeList.add(cdAllMilitary);
List<TreeBo> cdMilitary = new ArrayList<TreeBo>();
cdAllMilitary.setChildren(cdMilitary);
TreeBo cq = new TreeBo();
cq.setText("重庆军区");
cq.setCls("folder");
cq.setLeaf(true);
cq.setId(11);
cq.setQtip("1军长");
cq.setHref("functionList.jsp");
cdMilitary.add(cq);
TreeBo km = new TreeBo();
km.setText("昆明军区");
km.setCls("folder");
km.setLeaf(true);
km.setId(12);
km.setQtip("2军长");
cdMilitary.add(km);
TreeBo bjAllMilitary = new TreeBo();
bjAllMilitary.setText("北京军区");
bjAllMilitary.setCls("folder");
bjAllMilitary.setLeaf(false);
bjAllMilitary.setId(2);
bjAllMilitary.setQtip("军委");
treeList.add(bjAllMilitary);
List<TreeBo> bjMilitary = new ArrayList<TreeBo>();
bjAllMilitary.setChildren(bjMilitary);
TreeBo bj = new TreeBo();
bj.setText("北京军区");
bj.setCls("folder");
bj.setLeaf(true);
bj.setId(21);
bj.setQtip("3军长");
bjMilitary.add(bj);
TreeBo tj = new TreeBo();
tj.setText("天津军区");
tj.setCls("folder");
tj.setLeaf(true);
tj.setId(22);
tj.setQtip("4军长");
bjMilitary.add(tj);
treeTest = JSONObject.toJSON(treeList).toString();
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(treeList).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
public void grid(){
int start = Integer.parseInt(ServletActionContext.getRequest().getParameter("start"));
int limit = Integer.parseInt(ServletActionContext.getRequest().getParameter("limit"));
GridBo grid = new GridBo();
grid.setTotalProperty(100);
List list = new ArrayList();
String root = "";
for(int i = start;i < start+limit;i++){
Map obj=new HashMap();
obj.put("id", i);
obj.put("name", "name"+i);
list.add(obj);
}
grid.setRoot(list);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
try {
PrintWriter writer = response.getWriter();
writer.print(JSONObject.toJSON(grid).toString());
} catch (IOException e) {
e.printStackTrace();
}
}
}
struncts.xml配置:
<package name="struts2" namespace="/" extends="struts-default">
<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>
</package>
window1.js:
Ext.onReady(function(){
//tree
var tree3 = new Ext.tree.TreePanel({
autoScroll:true,
animate:true,
enableDD:true,
autoHeight:true,
autoWidth:true,
containerScroll:true,
loader:new Ext.tree.TreeLoader({dataUrl:'function_testTree.action'})
});
var root3 = new Ext.tree.AsyncTreeNode({
text:'中国军区',
draggable:false,
id:'testTree'
});
tree3.setRootNode(root3);
//grid
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:50,sortable:true},
{header:'名称',dataIndex:'name',width:100,sortable:true}
]);
var store = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'function_grid.action'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root',
fields:[
{name:'id'},
{name:'name'}
]})
});
var grid = new Ext.grid.GridPanel({
store:store,
cm:cm,
width:500,
autoHeight:true,
stripeRows:true,
loadMask:true,
viewConfig:{
forceFit:true,
enableRowBody:true,
columnsText:'显示的列',
sortAscText:'升序',
sortDescText:'降序',
scrollOffset:1
},
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:'没有记录'
})
});
store.load({params:{start:0,limit:10}});
var tabs = new Ext.TabPanel({
region:'center',
defaults:{autoScroll:true},
activeTab:0,
items:[
{
title:'默认',items:[grid]
},
{
title:'标签',
html:'内容'
},
{
title:'可关闭',
html:'内容',
closable:true
}
]
});
var nav = new Ext.Panel({
title:'导航',
region:'west',
split:true,
width:200,
items:[tree3],
collapsible:true
});
var win = new Ext.Window({
title:'复杂布局',
colseable:true,
width:720,
height:330,
border:false,
layout:'border',
items:[nav,tabs]
});
win.show();
});
window1.jsp文件:
<html>
<head>
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<script type="text/javascript" src="./js/window1.js"></script>
</head>
<body>
<div id="window-win"></div>
</body>
</html>
效果图如下:
[img]http://f.hiphotos.bdimg.com/album/pic/item/4bed2e738bd4b31c6ad5853886d6277f9f2ff84c.jpg[/img]