今天上午测试并实现了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>
分享到：
相关推荐
实现前台分页的扩展文件（来源于网络） 博文链接：https://simplehumn.iteye.com/blog/552702
实现分页查询的前台代码，不保证能用，仅供参考，谢谢！！！！！
通过 json 接收后台数据，在前台分页显示数据，这只是我整的一个例子哦，就是 dwr+ext
如何实现前台使用Ext技术，dwr作为通信通道后Ext的分页问题，主要采用DWRProxy实现。
课程的作业 用struts1+hibernate实现的 前台加入了ext的分页实现，这个应该有一点参看价值~
2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活，EditorGrid。 2.8.1. 旋动舞步，看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行，再把它踢掉 2.8.3. 一切就绪，你可以按保存按钮了。 2.8.4. 天马行空，保证提交...
前台是jsp加上ext的框架。 后台是hibernate-annotations和spring以及dwr的组合。 顺便演示了一下用servlet来返回json数据给ext框架的方式。 <br>在grid的演示部分，包括了分页的数据调用和如何处理来自...
9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...
一个Ext3 + struts2 + mysql的程序，...代码大概有3000行，功能包括基本的增删改查、头像上传、分页、拦截器等功能，还用ext做了部分前台，有拒不刷新，三级两栋菜单等。这个用来做毕业设计绰绰有余，程序和数据库完整
3.9.4 让EXT支持前台排序 52 3.10 后台排序 53 3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 添加一行数据 56 3.11.3 保存修改结果 58 3.11.4 验证EditGrid中的数据 59 ...
使用EXT的EditorGrid，实现前台页面对数据直接进行增删改查操作。用户的友好性较好,已经实现分页功能。例子中使用了DWR和JSON.含MySQL数据库脚本，并已加入Log4j日志记录。本例详细讲解可以参见：...
9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...
+修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢，原因是客户端的Base64编码速度慢，已经使用encodeURIComponent来代替Base64编码。 -俄语...
[PHPBB3-15174] - 无法清除缓存（ext＆acp）； [PHPBB3-15195] - 打印视图中的代码方向未定义为“ltr”； [PHPBB3-15201] - 删除样式将user_style设置为0； [PHPBB3-15224] - 使用Mysql全文搜索索引时，“仅限...
10. 修改前台界面 11. 修复已知BUG 12. 修复已知安全漏洞 13. 增加安装时自定义后台管理登录地址 14. 去掉PHPSSO模块、去掉Video及视频库相关、去掉Upgrade在线升级 15. 去除了已被废弃的视频模块和视频模型 16. ...