ExtJS网格分页：下一个按钮被禁用！ [英] ExtJS Grid Paging: next button is disabled!

问题描述

我创建了一个基本网格，它具有一个页面工具栏。由于某些原因，当我加载索引0时，下一页按钮被禁用，即使文本说显示第1页，共5页。如果我在商店的加载参数中选择高于0的值，那么它允许我向前和向后翻页，但是它不能正确显示最大页数，如果我回到第一页，下一个按钮是一次再次禁用。

I created a basic grid that has a paging toolbar. For some reason when I load up at index 0, the Next Page button is disabled, even though the text says "Displaying page 1 of 5". If I choose anything higher than 0 in the load params for the store, it allows me to page forward and back, but it does not properly display the max # of pages and if I go back to the first page, the next button is once again disabled.

任何想法？

function getBugGrid(activityPanelWrapper){
  var pageSize = 5;
  var bugStore = new Ext.data.JsonStore({
                                          reader: new Ext.data.JsonReader({
                                                                            totalProperty: 'total_count'
                                                                          }),
                                          autoLoad: {params:{start: 0, limit: pageSize}},
                                          autoDestroy: true,
                                          url: '/bugs/fetch',
                                          idProperty: 'id',
                                          region: 'center',
                                          root: 'data',
                                          storeId: 'bugStore',
                                          fields: [...]
                                        });

  var columnModel = new Ext.grid.ColumnModel({
                                               defaults: {
                                                 width: 120,
                                                 sortable: true
                                               },
                                               columns: [...]
                                             });

  return new Ext.grid.GridPanel({
                                      region: 'center',
                                      store: bugStore,
                                      colModel: columnModel,
                                      trackMouseOver:false,
                                      loadMask: true,
                                      sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                                      listeners: {
                                        rowclick: {
                                          fn: function(grid, rowIndex, event) {
                                            var bug_id = grid.store.getAt(rowIndex).id;
                                            Ext.getCmp('activity-panel').load(activity_lines_path(bug_id));
                                          }
                                        }
                                      },
                                      bbar: new Ext.PagingToolbar({
                                                                    pageSize: pageSize,
                                                                    store: bugStore,
                                                                    displayInfo: true,
                                                                    displayMsg: 'Displaying topics {0} - {1} of {2}',
                                                                    emptyMsg: "No topics to display"
                                                                  })
                                    });
}

JSON响应：

{"data":[{ bug 1 },{ bug 2 },{ bug 3 },{ bug 4 },{ bug 5 }],
 "errors":{},
 "total_count":25}

推荐答案

您不是在JsonReader中阅读TotalProperty ...

You are not reading the TotalProperty in the JsonReader...

您需要将此配置添加到您的autoLoad ...

You need to add this config to your autoLoad...

var bugStore = new Ext.data.JsonStore({
  autoDestroy: true,
  url: '/bugs/fetch',
  idProperty: 'id',
  root: 'data',
  storeId: 'bugStore',
  fields: [ ... ]
  autoLoad: {params:{start: 0, limit: pagesize}}
});

您还可以在JSON存储中定义JSON读取器：

You can also define a JSON reader in your JSON store:

var myStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
    totalProperty: 'total_count', 
    ...
}),
...

}）;

这篇关于ExtJS网格分页：下一个按钮被禁用！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！