ExtJs 5 Динамическая сетка pagination

Question

Я создаю динамическую сетку (должен быть разбит на страницы), используя данные из запроса на отправку POST на сервер (код ниже). Я передаю pageid и страницы на сервер во время первого запроса (при загрузке), и он отвечает на нужные данные. Я установил панель инструментов пейджинга в сетку, и теперь я хочу включить разбивку на страницы при нажатии следующей, последней и т. Д. Пейджера. Как я могу отправить запрос на сервер и вернуть обратно соответствующие данные для перенастройки сетки с данными следующей страницы?

var screenResults = {}; 
screenResults.pageid =1; 
screenResults.pagesize = 10; 
screenResults = Ext.JSON.encode(screenResults); 

Ext.Ajax.request({ 
     url  : 'http://localhost/service/getGridData', 
     method : 'POST', 
     timeout: 5000000, 
     scope: this, 
     dataType: 'json', 
     jsonData: screenResults, 
     success: function(response){ 
      var grid = Ext.getCmp("idSearchResultsGrid"); 
      var gridData = Ext.decode(response.responseText); 

      var fields = gridData.data.fields; 
      var newColumns = gridData.data.columns; 
      var arr = gridData.data.data; 

      var data = []; 
      for(var i=0;i<arr.length;i++){ 
       var obj = arr[i].resultsMap; 
       data.push(obj); 
      } 

      var newStore = Ext.create('Ext.data.Store', { 
       storeId: 'DynamicGridStore', 
       pageSize:10, 
       fields: fields, 
       data: data 
       /* 
       proxy: { 
        type: 'ajax', 
        url  : 'http://localhost/service/getGridData', 
        method : 'POST', 
        timeout: 5000000, 
        jsonData: screenResults, 
        actionMethods: { 
          read : 'POST' 
         } 

       } 
       */ 
      }); 
      //debugger; 
      /* 
      globalStore = newStore.load({ 
       params: { 
        start: 0, 
        limit: 10 
       } 
      }); 
      */ 

      var pagingBar = Ext.create('Ext.PagingToolbar', { 
       pageSize: 10, 
       store: newStore, 
       dock: 'bottom', 
       displayInfo: true 
      }); 

      grid.removeDocked(grid.getDockedItems()[1]); 
      grid.addDocked(pagingBar); 
      grid.reconfigure(newStore, newColumns); 
     }, 
     failure: function(response){ 
       console.log(response); 
     } 
    }); 

},

Answer 1

Прежде всего, вам не нужно явно делать AJAX звонки, как это. Они будут сделаны для вас за кулисами прокси-сервера магазина - при условии, что прокси-сервер настроен правильно (ваш комментарий закомментирован в данный момент).

Ваша задача очень тривиальная и охватывается несколькими примерами. Посмотрите на this one. Нажмите «Детали» справа, чтобы увидеть код.

Также см. Документацию Ext.toolbar.Paging.