extjs 分页 分页工具分页和缓存分页的简单使用 buffered、pagingtool

无论是那种分页，后台返回给前台数据时都是分页结构的数据，具体内容必须包括总的数据件数和当前查询页面的数据。

 

1.使用分页工具条（pagingtoolbar）分页

gridpanel必须首先增加pagingtoolbar，配置如下：

dockedItems: [
               {
                   xtype: 'pagingtoolbar',
                   dock: 'bottom',
                   displayInfo: true,
          store: ‘要使用的store’
               }
          ]

这样页面就会显示分页工具条，但具体能否使用还要在store里配置。

store的配置项如下：

autoLoad: true,
                pageSize: 30,
                proxy: {
                    type: 'ajax',
                    url : url,
                    reader: {
                        type: 'json',
                        root: 'data',
                     successProperty: 'success',
                     totalProperty: 'totalcount',
                     messageProperty:'message'
                    }
                }

pageSize和totalProperty是必须的配置。

 

2.使用缓存进行分页

这个不使用工具条分页，而是利用滚动条分页，但滚动条滚动到相应的页面，便去查询这个页面的数据。

pageingtoolbar不用配置，但grid的autoScroll:true是必须的。

store同样也是要配置的，如下：

pageSize:100,
         leadingBufferZone: 0,
         trailingBufferZone: 0,
         buffered: true,
         autoLoad: false,
            proxy: {
                type: 'ajax',
                url : 'xxxxx.action',
                reader: {
                    type: 'json',
                    root: 'data',
                 successProperty: 'success',
                 totalProperty: 'totalcount',
                 messageProperty:'message'
                }
            }

leadingBufferZone是查询当前页数据时，查询前面多少条数据的配置，

leadingBufferZone是查询当前页数据时，查询后面多少条数据的配置，

buffered：true是启用缓存的配置，

totalProperty: 'totalcount',也是分页必须的配置。

这样滚动条就实现了分页的配置。

 

还有一点注意事项：

分页的时候别忘记同样的查询条件，条件变了等情况，

所以结果也就不对。

至于如何在分页时设置参数，会在另外一篇文章中写道。