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中也要有此属性。

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

     

 
posted @ 2015-12-17 12:03  飞起航  阅读(6061)  评论(0编辑  收藏  举报