ext网格实践

打开eclipse，新建web project。

1、首先把ext2.0包拷贝到WebRoot目录：

2、在WebRoot目录下新建ext_query.html文件：

<html>

<head>

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>

</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',

100

},{

header:'源号码',

dataIndex:'source',

},{

header:'内容',

dataIndex:'content',

220

},{

header:'发送时间',

dataIndex:'sendtime',

},{

header:'业务类型',

dataIndex:'type',

}, {

header: "id",

dataIndex: 'id',

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',

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网格实践