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', } }