ExtJS实现分页grid paging
背景
分页查询在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中也要有此属性。
proxy : {
...
reader : {
...
totalProperty: 'totalCount',
}
}
ExtJS实现分页grid paging的更多相关文章
- ExtJS 4.2 Grid组件的单元格合并
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...
- 内存不够怎么办? 1.5.1 关于隔离 1.5.2 分段(Segmention) 1.5.3 分页(Paging)
小结: 1. 内存不够怎么办?1.5.1 关于隔离1.5.2 分段(Segmention)1.5.3 分页(Paging) <程序员的自我修养——链接.装载与库>
- [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- ExtJS自制表格Grid分页条
试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...
- Extjs 4.2 grid 分页问题,点击下一页参数没带过去
最初的store写法: var store = Ext.create('Ext.data.Store', { model: 'PKU',//这个地方CarPKU不是一个对象,而是一个类 remoteS ...
- Extjs 4.2 Grid增删改及后台交互(Java)
上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...
- ExtJs中的Grid具体操作(笔记及心得)
一.基本操作步骤 var cm=new Ext.grid.ColumnModel([ //对列的定义,cm是它的简写,作为真个表格的列模式,需要首先创建的{header:'编号',dataIndex: ...
- Javascript - ExtJs - 组件 - 分页
服务端只需要返回如下格式的字符串,ExtJs就可以解析并自动生成分页数据. , name: "sam" } ] } 准备: CREATE PROCEDURE [dbo]. ...
- Sencha ExtJS 6 Widget Grid 入门
最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...
随机推荐
- Egret P2 入门学习资料
1 p2库下载: https://github.com/egret-labs/egret-game-library/tree/rc/4.1.0 2 p2 作者demo:https://github.c ...
- Intellij IDEA同时打开多个项目
extends:http://www.kaifazhe.me/java/99.html 使用eclipse习惯的同学知道是可以同时多个项目查看的,只需要import就可以了,但Intellij IDE ...
- R的grep和grepl
grep(pattern, x, ignore.case = FALSE, perl = FALSE, value = FALSE, fixed = FALSE, useBytes = FALSE, ...
- 树链剖分-点的分治(链的点的个数为k的点对数)
hdu4760 Cube number on a tree Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65535/65535 ...
- Python 自学积累(一)
1. 当"print os.path.dirname(__file__)"所在脚本是以完整路径被运行的, 那么将输出该脚本所在的完整路径,比如: python d:/pythonS ...
- 【JavaScript算法】---希尔排序
一.什么是希尔排序 希尔排序(Shell's Sort)是插入排序的一种又称“缩小增量排序”,是直接插入排序算法的一种更高效的改进版本. 思路: 希尔排序是把记录按下标的一定增量分组,对 ...
- 170511、Spring IOC和AOP 原理彻底搞懂
Spring提供了很多轻量级应用开发实践的工具集合,这些工具集以接口.抽象类.或工具类的形式存在于Spring中.通过使用这些工具集,可以实现应用程序与各种开源技术及框架间的友好整合.比如有关jdbc ...
- HDU_2586_How far away ?
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 2.5 – Garbage Collection 自动垃圾回收 Stop-the-world vs. incremental vs. concurrent 垃圾回收策略
2.5 – Garbage Collection 自动垃圾回收 Lua 5.3 Reference Manual http://www.lua.org/manual/5.3/manual.html# ...
- CSS之Flex 布局:语法篇
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...