Ext Grid 后台分页
Widget结构组织代码。
Grid文件目录
grid
|--grid.css
|--grid.json
|--grid.js
|--grid.html
类文件
GridServlet.java
----------------------------------------------------------
grid.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<h1>Paging Grid Example</h1>
<p><a href="grid.js">grid.js</a>.</p>
<div id="grid"></div>
</body>
</html>
grid.json文件
{
"totalCount":"34864",
"topics":
[
{"id":"1","title":"Title 1","author":"Conan1","value":"content1"},
{"id":"2","title":"Title 2","author":"Conan2","value":"content2"},
{"id":"3","title":"Title 3","author":"Conan3","value":"content3"},
{"id":"4","title":"Title 4","author":"Conan4","value":"content4"},
{"id":"5","title":"Title 5","author":"Conan5","value":"content5"},
{"id":"6","title":"Title 6","author":"Conan6","value":"content6"},
{"id":"7","title":"Title 7","author":"Conan7","value":"content7"},
{"id":"8","title":"Title 8","author":"Conan8","value":"content8"},
{"id":"9","title":"Title 9","author":"Conan9","value":"content9"},
{"id":"10","title":"Title 10","author":"Conan10","value":"content10"}
]
}
grid.js文件
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: "/ExtWeb/servlet/GridServlet" //url:"grid.json" 读json的写法
}),
// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "id",
fields: [
"id","title","author","value"
]
}),
// turn on remote sorting
remoteSort: true
});
store.setDefaultSort("id", "asc");
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var cm = new Ext.grid.ColumnModel([{
id: "id", // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Id",
dataIndex: "id"
},{
header: "标题",
dataIndex: "title"
},{
header: "作者",
dataIndex: "author"
},{
header: "说明",
dataIndex: "value"
}]);
// by default columns are sortable
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
el:"grid",
width:600,
height:250,
title:"ExtJS.com - Browse Forums",
store: store,
cm: cm,
trackMouseOver:true,
sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
loadMask: true,
viewConfig: {
forceFit:true
//enableRowBody:true,
//showPreview:true
},
//分页行
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: "Displaying topics {0} - {1} of {2}",
emptyMsg: "No topics to display"
})
});
// render it
grid.render();
// trigger the data store load 分页大小
store.load({params:{start:0, limit:10}});
});
GridServlet.java
package com.amssy.web.servlet.ext.demo;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.amssy.common.dao.PagingObject;
import com.amssy.common.web.ext.PagingGrid;
import com.amssy.context.ContextFactory;
import com.amssy.service.NoteService;
import com.amssy.web.servlet.ext.grid.ExtGrid;
/**
*
* query Grid list
*
* /servlet/GridServlet
*
* @author Conan
* @version 1.0
* @date 2008-8-1
*/
public class GridServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//取到默认的分页参数(4个, dir, limit,sort,start)
Map paging = PagingGrid.getPagingParameters(request);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//输出JSON
out.print(renderGrid(paging));
out.flush();
out.close();
}
/**
* query paging grid
*
* @param paging
* @return
*/
public String renderGrid(Map paging) {
//通过spring取数据
NoteService note = (NoteService) ContextFactory.getContext().getBean("noteService");
String tmp = null;
try {
PagingObject page = note.queryNote(paging);
//拼装JSON
tmp = ExtGrid.getNoteGrid(page);
} catch (Exception e) {
e.printStackTrace();
}
//System.out.println(tmp);
return tmp;
}
}
|
|
