ExtJS Grid Paging: Nächste Schaltfläche ist deaktiviert!

Question

Ich habe ein Grundraster mit einer Paging-Symbolleiste erstellt. Aus irgendeinem Grund, wenn ich bei Index 0 hochlade, ist die Schaltfläche Nächste Seite deaktiviert, obwohl der Text "Seite 1 von 5 wird angezeigt" lautet. Wenn ich etwas höher als 0 in den Ladeparametern für den Laden wähle, erlaubt es mir, vorwärts und rückwärts zu blättern, aber es zeigt nicht die maximale Anzahl an Seiten an und wenn ich zurück zur ersten Seite gehe, ist der nächste Knopf einmal wieder deaktiviert.

Irgendwelche Ideen?

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 Antwort:

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

Answer 1

Sie sind nicht die TotalProperty im JsonReader lesen ...

Sie müssen diese Konfiguration zu Ihrem autoload hinzuzufügen ...

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

Sie können in Ihrem JSON-Speicher auch einen JSON-Leser definieren:

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

});