ext网格实践
打开eclipse，新建web project。
1、 首先把ext2.0包拷贝到WebRoot目录：
2、 在WebRoot目录下新建ext_query.html文件：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Ext2.0查询示例</title>
<!-- 公用CSS和Lib -->
<link rel="stylesheet" type="text/css" href="./js/ext2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="./js/ext2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./js/ext2.0/ext-all.js"></script>
<!-- Tooltip中文提示 -->
<script type="text/javascript" src="./js/ext2.0/build/locale/ext-lang-zh_CN-min.js"></script>
<!-- 我的脚本 -->
<script type="text/javascript" src="ext_query.js"></script>
<!-- 我的样式 -->
<style type="text/css">
body{padding:10px;}
.icon-grid {background-image:url(images/icons/fam/grid.png) !important;}
.red{color:red; font-weight:bold;}
.green{color:green; font-weight:bold;}
.icon-search {background-image:url(images/icons/fam/application_go.png) !important;}
.icon-del{background-image:url(images/icons/fam/delete.gif) !important;}
</style>
</head>
<body>
<!-- 作用不明,但是必须 -->
<script type="text/javascript" src="./js/ext2.0/examples/examples.js"></script>
<div id="grid" ></div>
<div id="debuger"></div>
</body>
</html>
注意阴影部分代码。编辑完保存，这个文件基本上会固定不变了。
3、 然后使用ext API编写脚本文件ext_query.js：
Ext.onReady(function(){
//初始化鼠标提示
Ext.QuickTips.init();
//①设置从服务器读取数据的方式，即把服务端返回的数据解析（转换）为Record格式、
//由于name和mapping的名字一样，故省略了mapping属性
var fds = Ext.data.Record.create([
{name:'type',type:'string'},
{name:'id',type:'int'},
{name:'dest',type:'string'},
{name:'source',type:'string'},
{name:'content',type:'string'}
,{name:'sendtime',type:'string'} //数据读取格式
]);
var today = new Date().dateFormat('Y-m-d');
//②数据储备器（设置服务器端数据在客户端的缓存方式）
var signStore = new Ext.data.JsonStore({
url:'./ext_query.jsp',
baseParams:{startDate:today,endDate:today,number:'',command:'query'},
//totalProperty:'count',
root:'records',//records是服JSONObject对象,必须是集合
fields:fds,
sortInfo:{field:'id',direction:'ASC'}
});
//全选Checkbox
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
//③列模型
var columnModel = new Ext.grid.ColumnModel([
sm,
new Ext.grid.RowNumberer(),{
header:'目标号码',
dataIndex:'dest',
width:100
},{
header:'源号码',
dataIndex:'source',
width:80
},{
header:'内容',
dataIndex:'content',
width:220
},{
header:'发送时间',
dataIndex:'sendtime',
width:80
},{
header:'业务类型',
dataIndex:'type',
width:80
}, {
header: "id",
dataIndex: 'id',
width: 50,
hidden: true,//本列隐藏
sortable: true
}
]);
columnModel.defaultSortable=true;
//查询-开始日期
var sdField = new Ext.form.DateField({
id:'startDate',
name:'startDate',
format:'Y-m-d',
minValue:'2008-02-01',
maxValue:today,
allowBlank:false,
value:today
});
//查询-结束日期
var edField = new Ext.form.DateField({
id:'endDate',
name:'endDate',
format:'Y-m-d',
minValue:'2008-02-01',
maxValue:today,
allowBlank:false,
value:today
});
//查询-手机号
var fldNumber=new Ext.form.TextField({
id:'number',
name:'number'
});
//查询按钮
var btnSearch = new Ext.Button({
text:'查询',
iconCls:'icon-search',
handler:function(){
if(sdField.isValid() && edField.isValid()){
signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d');
signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d');
signStore.baseParams.number=fldNumber.getValue();
}
signStore.load();
}
});
//④创建Grid
var signGrid = new Ext.grid.GridPanel({
store:signStore,
cm:columnModel,
sm:sm,
renderTo:'grid',
width:650,
height:440,
title:'短信队列查询',
frame:true,
iconCls:'icon-grid',
loadMask:true,
stripeRows:true,
tbar:[
'日期从',sdField,' 到 ',edField,' 手机号 ',fldNumber,' ',btnSearch,'-'
]
});
signStore.load();
});
以上代码比较复杂，但只需注意代码中标注的①-④处即可。
①设置服务端数据的读取格式(即DataReader)，即把服务端返回的JSONObject对象映射为Record对象；
②准备数据存储器，即规定如何从服务端获取数据并缓存到客户端的Record对象，这里会使用ajax请求获取服务端数据，且在此指定服务端url地址；
③设置列模型，即数据在网格上的显示方式，并将列和Record对象的属性进行绑定；
④创建grid，即把列模型和grid绑定，并设置grid的工具栏等；
4、 编写后台服务，这里是ext_query.jsp页面。为了简单起见，ext_query.jsp仅仅是随便生成了一些测试数据，并以JSONObject对象的格式输出：
<%@ page contentType="text/html; charset=GBK"%>
<jsp:directive.page import="org.json.*"/>
<%
String command = request.getParameter("command");
System.out.println("command:" + command);
if ("query".equals(command)) {
String startDate = request.getParameter("startDate");
String endDate = request.getParameter("endDate");
String number=request.getParameter("number");
System.out.println("startdate:" + startDate + "__enddate:"
+ endDate+"__number:"+number);
JSONArray signs = new JSONArray();
for (int i = 0; i < 12; i++) {
JSONObject sign = new JSONObject();
sign.put("id",i+1).put("dest", "08712875577").put("source", "106295598")
.put("type","-DFTZ").put("content", "短信测试" + i).put("sendtime",
"2010-01-01 01:02:03.05");
signs.put(sign);
}
JSONObject json = new JSONObject();
json.put("records", signs);
out.print(json);//输出json数据
//System.out.print(signLog);
}
%>
显然，大部分情况下我们的都是从数据库中得到的，这只需要对ext_query.jsp进行简单修改就可以了。
5、 运行工程，最终效果如下：
现在我们来给grid加上分页功能。
6、 首先需要修改服务端代码ext_query.jsp，在返回的JSONObject对象中加上一个totalCount属性，并根据ext传来的两个参数start和limit返回不同的页数据：
<%@ page contentType="text/html; charset=GBK"%>
<jsp:directive.page import="org.json.*"/>
<%
String command = request.getParameter("command");
String start=request.getParameter("start");
start=start==null||"".equals(start)?"0":start;
String limit=request.getParameter("limit");
limit=limit==null||"".equals(limit)?"10":limit;
int iStart=Integer.parseInt(start);
int iLimit=Integer.parseInt(limit);
int total=32;
int max=total;
if(iStart+iLimit<total)max=iStart+iLimit;
System.out.println("command:" + command+" start:"+start+" limit:"+limit);
if ("query".equals(command)) {
String startDate = request.getParameter("startDate");
String endDate = request.getParameter("endDate");
String number=request.getParameter("number");
System.out.println("startdate:" + startDate + "__enddate:"
+ endDate+"__number:"+number);
JSONArray signs = new JSONArray();
//System.out.println(signs.length());
int i = iStart;
for (; i < max; i++) {
JSONObject sign = new JSONObject();
sign.put("id",i+1).put("dest", "08712875577").put("source", "106295598")
.put("type","-DFTZ").put("content", "短信测试" + i).put("sendtime",
"2010-01-01 01:02:03.05");
signs.put(sign);
}
JSONObject json = new JSONObject();
json.put("records", signs).put("totalCount",total);
out.print(json);//输出json数据
//System.out.print(signs.toString());
}
%>
注意阴影部分修改的代码。运行浏览ext_query.jsp，可以看到返回的JSONObject对象最后增加了一个属性totalCount，并且根据请求参数start和limit只返回当页的数据：
7、 修改ext_query.js，首先增加一个全局变量：
//页大小
var pageSize=10;
然后构建一个分页工具栏：
//构造分页工具栏
var pagingToolbar = new Ext.PagingToolbar({
pageSize: pageSize,
store: signStore,
displayInfo: true,
displayMsg: '第{0}-{1}条，一共{2}条',
emptyMsg: "没有记录",
items: [
'-', btnDel
]
});
在创建grid时把分页工具栏添加进去：
//创建Grid
var signGrid = new Ext.grid.GridPanel({
……
bbar: pagingToolbar
});
最后，在load store时需要增加两个参数start和limit：
signStore.load({ params: { start: 0, limit: 10} });
运行效果如图：
8、 最后再完善一下。序号列每一页都从1开始，似乎不太合理，应改为记录在整个记录中的序号才合理。
首先增加一个全局变量：
//起始序号
var record_start=0;
在构造分页工具栏时增加处理函数，使得翻页后把每次翻页的起始记录号记录下来：
//构造带分页工具栏
var pagingToolbar = new Ext.PagingToolbar({
……
doLoad : function(start){
record_start = start;//记录每次翻页后的起始序号
//另外，由于翻页函数被覆盖了，还需要在加载数据时传递limit和start
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
this.store.load({params:o});
}
});
最后，修改列模型，把序号列的计算方式改为：
//列模型
var columnModel = new Ext.grid.ColumnModel([
……
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return record_start + 1 + rowIndex;
}
}),……
]);
现在再来看翻页效果：
序号已经过重新计算了。源码下载：ext网格实践