Extjs动态生成grid
在Extjs中生成表格的页面数据是Extjs提供的强大功能。在这里主要是做了一个简单的从后台通过structs2获取数据显示在页面的示例。json数据在后台是通过fastjson.jar封装的。
java代码:
Bo类：
package com.test.bo;
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.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.GridBo;
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();
}
}
}
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/grid1.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
<script type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="grid"></div>
</div>
</body>
</html>
js页面：
Ext.onReady(function(){
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({
renderTo:'grid',
store:store,
cm:cm,
autoWidth:true,
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}});
});
效果图如下:
java代码:
Bo类：
package com.test.bo;
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.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.alibaba.fastjson.JSONObject;
import com.test.bo.GridBo;
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();
}
}
}
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/grid1.js"></script>
<link rel="stylesheet" type="text/css" href="./css/menu.css">
<script type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="grid"></div>
</div>
</body>
</html>
js页面：
Ext.onReady(function(){
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({
renderTo:'grid',
store:store,
cm:cm,
autoWidth:true,
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}});
});
效果图如下: