刚刚下去做了个demo, 可以基本确定的是楼主没有理解ext分页的操作流程。
当GridPanel加上PagingToolbar之后, 每次请求数据或者点上一页或下一页的时候, ajax都会向后台发送至少两个参数:start, limit, 你debug以下后台就知道了。所以ext分页是靠后台利用这两个参数取合适的数据来做的。
因为我刚才测试的时候我PagingToolbar的pageSize限制为3, 但是我发送4条数据页面还是现实4条,所以我猜测你后台都是取出所有的数据。
如果你看得懂jsp, 我的测试代码给你看看:
1.jsp:后台取数据用。我没有真连数据库,只是模拟取数据
Java code
<%
request.setCharacterEncoding("utf-8");
String _start = request.getParameter("start");
String _limit = request.getParameter("limit");
int start = Integer.parseInt(_start);
int limit = Integer.parseInt(_limit);
//返回的json字符串
String responseString = "{total:50,data:[";
for(int i=0; i<limit; i++){
responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
if(i!=limit-1){
responseString+= ",";
}
}
responseString+="]}";
System.out.println(responseString);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(responseString);
response.flushBuffer();
response.getWriter().close();
%>
前台paging.js:
JScript code
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'total',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
],
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/1.jsp'
})
});
var pagingBar = new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:500,
height:300,
title:'ExtJS Paging Test',
store: store,
columns:[
{header:"ID",dataIndex:"id"},
{header:"Name",dataIndex:"name"},
{header:"EMail",dataIndex:"email"}
],
bbar: pagingBar
});
grid.render();
store.load({params:{start:0, limit:3}});
});
分享到:
相关推荐
以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了一个可配置的列模型(column model)、数据源(store)以及视图配置。 - `store`:存储...
1. 首先,创建一个Ext JS的PagingToolbar实例,并将其与相应的Store和GridPanel关联。 2. 在PagingToolbar的配置中,添加PageResizer组件,指定其行为(如下拉菜单或滑动条)和可选的每页记录数。 3. 编写必要的事件...
在本实例中,我们探讨的是如何在ExtJS应用中实现后台分页功能,这通常涉及到与服务器端的交互,以获取并展示大量数据。JSP(JavaServer Pages)是一种基于Java的动态网页技术,常用于处理后端逻辑,包括数据的读取和...
下面是一个简单的GridPanel实例代码: ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {...
在这个MVC(Model-View-Controller)分页实例中,我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计模式,它将应用程序分为三个主要部分:模型(Model)处理数据,视图...
`xtype`是EXTJS中组件的简写形式,可以理解为组件的标识符,用于创建组件实例时引用已定义的组件类。通过使用`xtype`,开发者可以简化代码,减少重复,并提高代码的可读性和维护性。 例如,当你想要创建一个按钮,...
在ExtJS中,Grid的分页通常是通过`Ext.grid.Panel`的`pagingToolbar`配置实现的。`pagingToolbar`是一个包含导航按钮(如“上一页”、“下一页”)和当前页信息的工具栏,它与数据源(通常是`Ext.data.Store`)关联...
总结来说,这段代码展示了EXTJS如何创建一个具有分页、编辑和删除功能的数据网格,以及如何在操作后保持用户在当前页面,通过`cursor`属性正确处理分页数据加载。这在大型数据集的Web应用中是非常常见的设计模式,...
- **分页**:配合`pagingToolbar`,GridPanel支持本地或远程分页。 - **过滤和搜索**:通过`filter`配置,用户可以对数据进行过滤。 - **列拖动**:允许用户通过拖动调整列的顺序。 - **行选择模式**:可以选择单行...
- **源代码结构**: ExtJS的源代码组织清晰,易于理解和扩展。 - **发布细节**: 在发布源码时,会包含必要的文档和示例代码,方便开发者快速上手。 #### 9. **EXT程序规划入门** - **准备工作**: 在开始编写ExtJS...
为了提高用户体验,可以设置数据网格的分页功能,使用`Ext.data.PagingToolbar`来显示分页导航。同时,提供一个刷新按钮,重新执行查询操作。 综上所述,"extjs2.0 画的一个带查询条件和查询结果的页面"涉及到的...
6. **添加PagingToolbar**:在GridPanel下方添加PagingToolbar,设置其store属性为PagingStore实例。 示例代码: ```javascript var store = new Ext.data.PagingStore({ proxy: { type: 'ajax', url: 'get-data...
创建了一个`PagingToolbar`实例,设置了每页显示的记录数和分页信息的显示方式。 7. **创建GridPanel** ```javascript var _grid = new Ext.grid.GridPanel({ height: 500, width: 800, store: _store, ...
这个压缩包文件"Extjs4.0.2a grid 增删改查"很可能是包含了一组示例代码和资源,用于演示如何在ExtJS 4.0中实现Grid组件的增删改查功能,以及搜索关键字、多条删除和批量更改等操作。 首先,让我们详细了解一下Grid...
- **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了代码提示、调试等功能。 - **资源**: 收集 Extjs 的官方文档、社区论坛等资源,以便在开发过程中查阅。 #### 二、Extjs OOP 基础 **...
它可以通过`Ext.Button`类进行实例化。 2. **`splitbutton`:** 这是一种带有下拉菜单的按钮组件。该组件通过`Ext.SplitButton`类实现。 3. **`cycle`:** 此组件提供了一个带有下拉选项菜单的按钮,由`Ext....
代码片段中的第3行创建了一个名为`ds`的`Store`实例,并配置了代理(`proxy`)和数据读取器(`reader`)。其中: - `proxy`: 使用`HttpProxy`来定义数据源的位置,即服务器的URL。 - `reader`: 定义了如何解析...
在本篇内容中,我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法,并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示...
这段代码中定义了一个包含多个列的网格(`grid`),并通过`Ext.data.Store`实例来管理数据。其中`getPager`函数用来创建分页工具栏。 #### 四、总结 通过上述步骤,我们成功实现了使用Struts2框架、JSON数据格式以及...
5. **PagingToolbar.js**:EXTJS中的分页工具栏组件,用于处理大量数据的分页显示。 6. **tools.js** 和 **ClearButton.js**:可能是自定义的工具函数和清除按钮组件。 7. **echarts.js**:百度开发的ECharts库,是...