一、首先增加一个jsp页面grid3.jsp
<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Grid3</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!--
<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css" />
-->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript" src="grid3.js"></script>
<div id="grid3" style="width: 100%;height: 100%">
</div>
</body>
</html>
/**
* @author fox
*/
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//proxy直接去读取josn数据
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'gridjson.jsp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root',
successProperty :'success'
}, [
{name: 'id',mapping:'id',type:'int'},
{name: 'name',mapping:'name',type:'string'},
{name: 'descn',mapping:'descn',type:'string'}
])
});
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
sm: sm,
cm: cm,
width:700,
height:280,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
//el:指定html元素用于显示grid
grid.render();//渲染表格
ds.load({params:{start:0, limit:10}});
});
<%
String start = request.getParameter("start");
String limit = request.getParameter("limit");
try {
int index = Integer.parseInt(start);
int pageSize = Integer.parseInt(limit);
String json = "{totalProperty:100,root:[";
for (int i = index; i < pageSize + index; i++) {
json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "'}";
if (i != pageSize + index - 1) {
json += ",";
}
}
json += "]}";
response.getWriter().write(json);
} catch(Exception ex) {
}
%>
这样，一个grid就出现了，值得注意的是，在grid.js里的
totalProperty: 'totalProperty',
root: 'root',
需要与gridjson.jsp里的相对应，要不然会出错
totalProperty是所有数据的条数
<?xml version="1.0" encoding="UTF-8" ?><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Grid3</title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /><!--<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css" />--><script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script><script type="text/javascript" src="extjs/ext-all.js"></script><script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script></head><body> <script type="text/javascript" src="grid3.js"></script> <div id="grid3" style="width: 100%;height: 100%"> </div></body></html>二、增加一个js grid3.js
/** * @author fox */Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; Ext.QuickTips.init(); var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]); //proxy直接去读取josn数据 var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'gridjson.jsp'}), reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root', successProperty :'success' }, [ {name: 'id',mapping:'id',type:'int'}, {name: 'name',mapping:'name',type:'string'}, {name: 'descn',mapping:'descn',type:'string'} ]) }); var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, sm: sm, cm: cm, width:700, height:280, bbar: new Ext.PagingToolbar({ pageSize: 10, store: ds, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', emptyMsg: "没有记录" }) }); //el:指定html元素用于显示grid grid.render();//渲染表格 ds.load({params:{start:0, limit:10}});});
三、因为grid3.js里的数据是通过url:'gridjson.jsp'来读取的（实例用jsp比较方便），所以新建一个gridjson.jsp来产生json格式的数据
<%String start = request.getParameter("start");String limit = request.getParameter("limit");try { int index = Integer.parseInt(start); int pageSize = Integer.parseInt(limit); String json = "{totalProperty:100,root:["; for (int i = index; i < pageSize + index; i++) { json += "{id:" + i + ",name:'name" + i + "',descn:'descn" + i + "'}"; if (i != pageSize + index - 1) { json += ","; } } json += "]}"; response.getWriter().write(json);} catch(Exception ex) {}%>totalProperty: 'totalProperty',
root: 'root',
需要与gridjson.jsp里的相对应，要不然会出错
totalProperty是所有数据的条数
