说明:采用Ext+dwr+java实现,中间运用dwr代理(dwrproxy.js),在java文件ListRange类中对返回的数据进行一次装载后ext才可以识别.
html文件:test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>系统</title>
<link rel="stylesheet" type="text/css" href="../css/ext-all.css" _fcksavedurl=""../css/ext-all.css"" _fcksavedurl=""../css/ext-all.css"" />
<link rel="stylesheet" type="text/css" href="../css/ytheme-gray.css" />
<script type="text/javascript" src="../js/ext-base.js"></script>
<script type="text/javascript" src="../js/ext-all.js"></script>
<script type="text/javascript" src="../js/ext-my.js"></script>
<script type="text/javascript" src="../js/dwrproxy.js"></script>
<script type='text/javascript' src='../dwr/interface/dwrLogService.js'></script>
<script type='text/javascript' src='../dwr/engine.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript' src="../js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<form id="form1" class="x-form">
<div id="mygrid" style="border:1px solid #b5b8c8; height: 360px;"></div>
</form>
</body>
</html>
js文件:test.js
var ds;
var basicForm ;
Ext.onReady
(
function()
{
var recordType = Ext.data.Record.create
(
[
{name: "operators", mapping:"operators", type: "string"},
{name: "object", mapping:"object", type: "string"},
{name: "action", mapping:"action", type: "string"},
{name: "sActTime", mapping:"actTimeCnt", type: "string"},
{name: "detail", mapping:"detail", type: "string"}
]
);
ds = new Ext.data.Store
(
{//通过dwr调用后台java文件方法dwrLogService.getOpLogList.
proxy: new Ext.data.DWRProxy(dwrLogService.getOpLogList, true),
reader: new Ext.data.ListRangeReader
(
{
totalProperty: 'totalSize',
id: 'id'
},
recordType
),
remoteSort: true
}
);
var cm = new Ext.grid.ColumnModel
(
[
{
header: '人员,
width: 80,
sortable: true,
dataIndex: 'operators'
},
{
header: '操对象',
width: 120,
sortable: true,
dataIndex: 'object'
},
{
header: '动作',
width: 100,
sortable: true,
dataIndex: 'action'
},
{
header: '操作时间',
width: 120,
sortable: true,
dataIndex: 'sActTime'
},
{
header: '描述',
width: 200,
sortable: true,
dataIndex: 'detail'
}
]
);
var grid = new Ext.grid.Grid
(
'mygrid',
{
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false
}
);
var rz = new Ext.Resizable
(
'mygrid',
{
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
}
);
rz.on('resize', grid.autoSize, grid);
grid.render();
var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbarMy
(
gridFoot,
ds,
{
beforePageText:"第",
afterPageText:"页/共{0}页",
beforePageSetText:"每页",
afterPageSetText:"行",
pageSize: 15,
displayInfo: true,
displayMsg: '显示从第{0}条 - 第{1}条的记录 记录总数:{2}',
emptyMsg: "没有相应记录!"
}
);
//初始化grid需加载的参数
getTime();
ds.on('beforeload', function() {
ds.baseParams = { };
});
//分页基本参数
ds.load({params:{start:0, limit:15}});
}
);
java文件:LogService类
public ListRange getOpLogList(Map<String,String> condition)
throws SQLException
{
int start = Integer.parseInt(condition.get("start"));
int limit = Integer.parseInt(condition.get("limit"));
ListRange listRange = new ListRange();
GeOperateLog param = new GeOperateLog();
param.setOperators(SessionHelper.getStaffBean().getEmailAddr());
List data = IbatisUtil.queryForList("geOperateLog_list", param, start,
limit);
Integer totalRows = ((Integer) IbatisUtil.queryForObject(
"geOperateLog_count", param)).intValue();
listRange.setData(data.toArray());
listRange.setTotalSize(totalRows);
return listRange;
}
ListRange类:
public class ListRange
implements Serializable
{
private Object[] data;
private int totalSize;
public Object[] getData()
{
return data;
}
public void setData(Object[] data)
{
this.data = data;
}
public int getTotalSize()
{
return totalSize;
}
public void setTotalSize(int totalSize)
{
this.totalSize = totalSize;
}
}
ibatis文件
<select id="geOperateLog_count" resultClass="java.lang.Integer"
parameterClass="geOperateLog">
select count(*) from test
</select>
<select id="geOperateLog_list" resultClass="geOperateLog"
parameterClass="geOperateLog">
select
operateLogID,operators,object,action,actTime,detail
from test
</select>