`
zyshaw
  • 浏览: 54068 次
  • 性别: Icon_minigender_1
  • 来自: 加興
文章分类
社区版块
存档分类
最新评论

EXtJS pagingtoolbar 实例代码

阅读更多
刚刚下去做了个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示例代码

    以下是对`ExtJS Grid`示例代码的详细解析: 1. **Grid的基本结构** - `Ext.grid.Panel`:这是Grid组件的基础类,它包含了一个可配置的列模型(column model)、数据源(store)以及视图配置。 - `store`:存储...

    Ext JS PagingToolbar 组件

    1. 首先,创建一个Ext JS的PagingToolbar实例,并将其与相应的Store和GridPanel关联。 2. 在PagingToolbar的配置中,添加PageResizer组件,指定其行为(如下拉菜单或滑动条)和可选的每页记录数。 3. 编写必要的事件...

    extjs后台分页实例

    在本实例中,我们探讨的是如何在ExtJS应用中实现后台分页功能,这通常涉及到与服务器端的交互,以获取并展示大量数据。JSP(JavaServer Pages)是一种基于Java的动态网页技术,常用于处理后端逻辑,包括数据的读取和...

    ExtJS 表格面板GridPanel完整例子

    下面是一个简单的GridPanel实例代码: ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [ {...

    Extjs 4.0 MVC分页实例

    在这个MVC(Model-View-Controller)分页实例中,我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计模式,它将应用程序分为三个主要部分:模型(Model)处理数据,视图...

    extjs xtype

    `xtype`是EXTJS中组件的简写形式,可以理解为组件的标识符,用于创建组件实例时引用已定义的组件类。通过使用`xtype`,开发者可以简化代码,减少重复,并提高代码的可读性和维护性。 例如,当你想要创建一个按钮,...

    Extjs grid分页1

    在ExtJS中,Grid的分页通常是通过`Ext.grid.Panel`的`pagingToolbar`配置实现的。`pagingToolbar`是一个包含导航按钮(如“上一页”、“下一页”)和当前页信息的工具栏,它与数据源(通常是`Ext.data.Store`)关联...

    EXTJS操作后返回当前操作页

    总结来说,这段代码展示了EXTJS如何创建一个具有分页、编辑和删除功能的数据网格,以及如何在操作后保持用户在当前页面,通过`cursor`属性正确处理分页数据加载。这在大型数据集的Web应用中是非常常见的设计模式,...

    Extjs2.02 Gridpanel

    - **分页**:配合`pagingToolbar`,GridPanel支持本地或远程分页。 - **过滤和搜索**:通过`filter`配置,用户可以对数据进行过滤。 - **列拖动**:允许用户通过拖动调整列的顺序。 - **行选择模式**:可以选择单行...

    ExtJS 3.2的中文参考手册

    - **源代码结构**: ExtJS的源代码组织清晰,易于理解和扩展。 - **发布细节**: 在发布源码时,会包含必要的文档和示例代码,方便开发者快速上手。 #### 9. **EXT程序规划入门** - **准备工作**: 在开始编写ExtJS...

    extjs2.0 画的一个带查询条件和查询结果的页面

    为了提高用户体验,可以设置数据网格的分页功能,使用`Ext.data.PagingToolbar`来显示分页导航。同时,提供一个刷新按钮,重新执行查询操作。 综上所述,"extjs2.0 画的一个带查询条件和查询结果的页面"涉及到的...

    extjs前台分页插件PagingStore!

    6. **添加PagingToolbar**:在GridPanel下方添加PagingToolbar,设置其store属性为PagingStore实例。 示例代码: ```javascript var store = new Ext.data.PagingStore({ proxy: { type: 'ajax', url: 'get-data...

    extjs gridpanel例子和简单应用

    创建了一个`PagingToolbar`实例,设置了每页显示的记录数和分页信息的显示方式。 7. **创建GridPanel** ```javascript var _grid = new Ext.grid.GridPanel({ height: 500, width: 800, store: _store, ...

    extjs4.0 grid

    这个压缩包文件"Extjs4.0.2a grid 增删改查"很可能是包含了一组示例代码和资源,用于演示如何在ExtJS 4.0中实现Grid组件的增删改查功能,以及搜索关键字、多条删除和批量更改等操作。 首先,让我们详细了解一下Grid...

    Extjs中文教程2.x

    - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了代码提示、调试等功能。 - **资源**: 收集 Extjs 的官方文档、社区论坛等资源,以便在开发过程中查阅。 #### 二、Extjs OOP 基础 **...

    extJs xtype 类型

    它可以通过`Ext.Button`类进行实例化。 2. **`splitbutton`:** 这是一种带有下拉菜单的按钮组件。该组件通过`Ext.SplitButton`类实现。 3. **`cycle`:** 此组件提供了一个带有下拉选项菜单的按钮,由`Ext....

    extjs 分页 下载

    代码片段中的第3行创建了一个名为`ds`的`Store`实例,并配置了代理(`proxy`)和数据读取器(`reader`)。其中: - `proxy`: 使用`HttpProxy`来定义数据源的位置,即服务器的URL。 - `reader`: 定义了如何解析...

    EXTJS分页全面分析

    在本篇内容中,我们将深入了解EXTJS中`GridPanel`分页技术的具体实现方法,并通过实例代码详细解析其工作原理和技术要点。 #### 一、EXTJS GridPanel分页概述 在EXTJS框架中,`GridPanel`组件是一种常用的数据展示...

    Struts2+Json+ExtJS分页

    这段代码中定义了一个包含多个列的网格(`grid`),并通过`Ext.data.Store`实例来管理数据。其中`getPager`函数用来创建分页工具栏。 #### 四、总结 通过上述步骤,我们成功实现了使用Struts2框架、JSON数据格式以及...

    用EXTJS写一个仪表盘的图形.pdf

    5. **PagingToolbar.js**:EXTJS中的分页工具栏组件,用于处理大量数据的分页显示。 6. **tools.js** 和 **ClearButton.js**:可能是自定义的工具函数和清除按钮组件。 7. **echarts.js**:百度开发的ECharts库,是...

Global site tag (gtag.js) - Google Analytics