ExtJs 5.1 панель инструментов пейджинга в панели сетки

Question

Использование ExtJS 5.1, когда я загружаю панель сетки, в пейджинговом инструменте отображается правильный номер подкачки. но во время загрузки страницы всегда отображается Страница 1 из 5. Кнопки Previous и Next отключены.

#

var store = new Ext.data.Store({ 

    autoLoad: {params:{start: 0, limit: 5}}, 
    pageSize: 5, 
    remoteSort: true, 
    model: 'TenantDetails', 
    proxy: { 
     type: 'ajax', 
     enablePaging : true, 
     url: 'http://localhost:8080/restcountries-dev/rest/page/v0.5/tenant', 
     reader: new Ext.data.JsonReader({ 
      type: 'json' ,    
      totalProperty:15, 
      rootProperty:'tenant' 
     }) 
    }, 
    listeners:{  
     load:function(store){    
      Ext.getCmp('tenant_detail_grid').getSelectionModel().select(0, true);    
     }  
    } 
}); 

#

и панель инструментов Paging определяется, как показано ниже.

просветляющего:

Ext.create('Ext.PagingToolbar', { 

     store: store, 
     displayInfo: true, 
     displayMsg: '{0} - {1} of {2}', 
     emptyMsg: "No topics to display" 
    }) 

#

Не знаю, что именно я missing.Thanks

Answer 1

Привет код выглядит правильно. Вот рабочий пример моего пейджинга.

initComponent: function() { 
    var me = this; 

    me.store = Ext.create('Desktop.children.store.childrenStore'); 

    me.columns = [ 
     { 
      text  : 'Nachname', 
      dataIndex: 'lastName', 
      flex: 1 
     }, 
     { 
      text  : 'Vorname', 
      dataIndex: 'firstName', 
      flex: 1 
     }, 
     { 
      text  : 'Gruppe', 
      //name: 'group_id', 
      dataIndex: 'groupName', 
      flex: 1 
     }, 
     { 
      text  : 'Faktor', 
      //name: 'group_id', 
      dataIndex: 'factorName', 
      flex: 1 
     }, 
     { 
      xtype: 'datecolumn', 
      text  : 'Geburtsdatum', 
      dataIndex: 'birthdate', 
      format: 'd.m.Y', 
      flex: 1 
     }, 
     { 
      text  : 'Status', 
      //name: 'group_id', 
      dataIndex: 'isActive', 
      flex: 1 
     }, 
     { 
       xtype: 'actioncolumn', 
       width: 60, 
       menuDisabled: true, 
       items: this.LoadControlBar() 
      } 
    ]; 

    me.plugins = [{ 
     ptype:'saki-gridsearch' 
     ,searchText: 'Suchen' 
     ,autoTipText: 'Mindestens zwei Zeichen' 
     ,selectAllText: 'Selektiere alle' 
    }]; 

    me.bbar = me.paging = Ext.create('Ext.toolbar.Paging', { 
     store:me.store 
     ,displayInfo:true 

    }); 


    me.tbar = [ 
     { 
      xtype: 'button', 
      id:'child_btn_add', 
      text:'Kind hinzufügen', 
      tooltip:'Neues Kind hinzufügen', 
      iconCls:'add', 
      hidden: (CheckPermission('Desktop.children.view.Mainwindow') != "WRITE"), 
      handler:function(view, e){ 
       this.fireEvent('AddChildren', view, e); 
      } 
     }, 
     { 
      xtype: 'button', 
      id: 'btnChildExport', 
      text: 'Liste exportieren', 
      tooltip: 'Spezifische Liste exportieren', 
      iconCls: 'exportList', 
      handler: function(view, e){ 
       this.fireEvent('ExportList', view, e); 
      } 
     } 
    ]; 

    me.callParent(); 
}, 

магазин:

Ext.define('Desktop.children.store.childrenStore', { 
extend: 'Ext.data.Store', 
id: 'childrenStore', 
alias: 'widget.childrenStore', 

requires: [ 
    'Desktop.children.model.childrenModel', 
    'Ext.data.proxy.Memory', 
    'Ext.data.reader.Array' 
], 


model: 'Desktop.children.model.childrenModel', 
//autoLoad:true, 
pageSize: 10, 
proxy: 
{ 
    type:'ajax', 
    enablePaging: true, 
    url:'resources/php/json.php', 
    headers: { 'Content-Type': 'application/json' }, 
    extraParams:{ 
     data : JSON.stringify({ 
      module : "children", 
      action : "load", 
      jsonObject : null}), 
     start: 0, 
     limit: 10, 
    }, 
    reader:{ 
     type:'json', 
     rootProperty: 'Anfang' 
    } 
}, 

sorters: [{ 
     property : 'lastName', 
     direction:'ASC' 
}], 
});