今天上午测试并实现了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
本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先，创建一个名为`resource`的数据存储（Store），它负责从服务器获取数据。这里的`Store`对象定义了字段（fields）、数据源URL...
ExtJS的PagingStore是其框架中用于实现前端分页功能的...以上就是关于ExtJS前台分页插件PagingStore的基本概念和使用方法。通过合理地使用PagingStore，可以有效地管理大量的数据展示，提升Web应用的性能和用户体验。
在这个"用ext写的前台源码 有说明文档"的压缩包中，你将找到使用ExtJS框架开发的前端代码，以及相关的JSON数据处理。 在ExtJS中，你可以使用各种组件如表格、面板、表单、树形结构等来构建复杂的UI。这些组件都封装...
它能够动态加载数据，提供排序、过滤、分页等功能，并且可以自定义列样式和行为。在ExtJS4中，我们可能有以下场景：用户在Grid中查看数据，然后希望将这些数据导出到Excel以便进一步分析或处理。 要实现这个功能，...
同时，Ext的Ext Grid组件能够灵活地展示大量数据，支持分页、排序、过滤等功能，极大地提升了用户体验。 在客户关系管理系统T86中，SSH框架可能被用于后端服务的搭建。Spring管理业务逻辑和服务接口，通过AOP实现...
2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活，EditorGrid。 2.8.1. 旋动舞步，看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行，再把它踢掉 2.8.3. 一切就绪，你可以按保存按钮了。 2.8.4. 天马行空，保证提交...
3. **高效的数据处理**：Ext.Net.Utilities.dll 提供的工具类可以帮助优化数据处理，例如在服务器端进行数据过滤、排序和分页，减轻前端的计算负担。 4. **事件处理**：Ext.Net支持C#事件驱动编程模型，开发者可以...
3. **EXT Grid**：EXT Grid是EXT中的核心组件，用于展示数据表格，支持排序、筛选、分页等功能，非常适合人力资源管理中的数据展示需求。 4. **EXT Form**：用于创建各种表单，如员工信息录入、请假申请等，与后端...
这涉及到从前台界面设计到后端数据处理的多个环节。下面将依次介绍相关知识点。 ### 一、Ext简介 Ext是一个用于构建交互式Web应用程序的JavaScript框架。它提供了丰富的UI组件和强大的数据管理功能，支持多种...
前台是jsp加上ext的框架。 后台是hibernate-annotations和spring以及dwr的组合。 顺便演示了一下用servlet来返回json数据给ext框架的方式。 <br>在grid的演示部分，包括了分页的数据调用和如何处理来自...
在EXT.NET框架中，GridView结合了灵活性和高效性，提供了一系列高级功能，如分页、排序、过滤、选择等。本文将深入解析EXT.NET GridView的使用方法，包括前台和后台的代码实现，并着重关注一些关键细节。 首先，...
Store的请求方式多样，包括简单加载（load）、远程排序和过滤（remoteSort和remoteFilter）、分页（paging）等。Store可以配置不同的proxy类型，如AjaxProxy或MemoryProxy，以适应不同的数据获取策略。 对于初学者...
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属性...