Ext前台分页
今天上午测试并实现了Ext的前台分页，参考了网上的资料，使用了网上的一个js文件，最后提供该js文件的下载。
实现代码：
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',sortable:true},
{header:'性别',dataIndex:'sex',sortable:true,renderer:function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}},
{header:'名称',dataIndex:'name',sortable:true},
{header:'描述',dataIndex:'descn',sortable:true}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping:0},
{name: 'sex',mapping:1},
{name: 'name',mapping:2},
{name: 'descn',mapping:3}
])
});
var memoryGrid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
sm: sm,
renderTo:Ext.getBody(),
bbar: new Ext.PagingToolbar({
plugins: new Ext.ux.SlidingPager(), //分页中的一个插件
pageSize: 2,
store: ds,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
}),
width:464,
height:155,
title:'memoryGrid'
});
ds.load({params:{start:0,limit:2}});
});
jsp文件：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>Memory Grid Example</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script>
<!-- 分页插件js --> <script type="text/javascript" src="js/ux/SlidingPager.js"></script> <script type="text/javascript" src="js/ux/SliderTip.js"></script> <script type="text/javascript" src="js/ux/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="memoryGrid.js"></script> </head> <body> </body> </html>