Extjs的Window中加入Tree和Grid

在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]