背景

分页查询在Web页面中比例很大,我自己也写过分页框架,也用过很多第三方分页。

  • 基于jquery的dataTables,那么多例子、清晰API、应用广泛、开源,即使是新手也可以很快上手。

  • ExtJS的分页功能,封装的很简单,因其例子少、API复杂、国内应用较少,往往需要先对ExtJS有整体认识、孰知API之后,才应用自如。感觉比较不易,以至于一个简单的分页功能我也想写下来。

例子

ExtJS版本:4.2

我认为ExtJS也有MVC分层概念,所以接下来会分展示层、数据模型层来描述。

展示层(view),在表格grid中添加分页控件bbar(代码如下)。其中store属性须要替换,不太清楚ExtJS为什么不直接用所在grid的store。

       bbar : {
xtype : 'pagingtoolbar',
store : 'XXXStore',
displayInfo : true,
displayMsg : '显示 {2} 条中的第 {0} 条到第 {1} 条',
emptyMsg : "没有满足查询条件的"
}

数据模型层(model),在store中指定数据总条数的属性名,如设置为totalCount,后台response中也要有此属性。

  1. proxy : {
    ...
    reader : {
    ...
    totalProperty: 'totalCount',
    }
    }
 

ExtJS实现分页grid paging的更多相关文章

  1. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  2. 内存不够怎么办? 1.5.1 关于隔离 1.5.2 分段(Segmention) 1.5.3 分页(Paging)

    小结: 1. 内存不够怎么办?1.5.1 关于隔离1.5.2 分段(Segmention)1.5.3 分页(Paging) <程序员的自我修养——链接.装载与库>

  3. [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)

    先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...

  4. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  5. Extjs 4.2 grid 分页问题,点击下一页参数没带过去

    最初的store写法: var store = Ext.create('Ext.data.Store', { model: 'PKU',//这个地方CarPKU不是一个对象,而是一个类 remoteS ...

  6. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  7. ExtJs中的Grid具体操作(笔记及心得)

    一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...

  8. Javascript - ExtJs - 组件 - 分页

    服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据.  , name: "sam" }     ] } 准备: CREATE PROCEDURE [dbo]. ...

  9. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

随机推荐

  1. web基础----->servlet中得到请求的数据

    对tomcat的源码做一些分析,今天我们就开始servlet中的请求分析. form表单中的默认类型 一.在index.jsp中get请求: <form action="Paramet ...

  2. 简明 Vim 教程

    学习 vim 并且其会成为你最后一个使用的文本编辑器.没有比这个更好的文本编辑器了,非常地难学,但是却不可思议地好用. 我建议下面这四个步骤: 存活 感觉良好 觉得更好,更强,更快 使用VIM的超能力 ...

  3. LeetCode——Sqrt(x)

    Description: Implement int sqrt(int x). Compute and return the square root of x. 好好学习数学还是非常有用的,牛顿迭代法 ...

  4. 电力项目十七--数据字典首页JS添加和删除表格

    知识点:jQuery是一个JavaScript函数库. JS代码: function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); ...

  5. OC开发_Storyboard——Core Data

    一 .NSManagedObjectContext 1.我们要想操作Core Data,首先需要一个NSManagedObjectContext2.那我们如何获得Context呢:创建一个UIMana ...

  6. Android - 采用 SharedPreferences 存储数据

    SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值对数据,通常用来存储一些简单的配置信息.其存储位置在/data/data/<包名& ...

  7. [python] python单元测试经验总结

    python写单元大多数都会用到unittest和mock,测试代码覆盖率都会用到coverage,最后再用nose把所有的东西都串起来,这样每次出版本,都能把整个项目的单元测试都运行一遍. Unit ...

  8. jquery点击事件失效原因和解决办法

    在使用jQuery绑定点击事件的时候,有时候会遇到点击无效,这种情况大多出现在动态添加元素的时候 例如:给demo里添加li元素给li绑定点击事件 $("#demo").appen ...

  9. redhat 6安装详解

    备注:redhat 6 系列OS安装步骤一致. 此处安装redhat 6.5 64位版本,即rhel-server-6.5-x86_64-dvd.iso 一.安装RHEL 6.5 用光盘成功引导系统, ...

  10. 【css a标签 鼠标悬浮时变手型】

    <a href="#" style="cursor:pointer">