Как использовать навигацию в сетке extjs

Question

Я хочу загрузить только 25 строк за раз в сетке. После нажатия следующей кнопки нужно добавить 25 строк. Данные в сетке находятся в формате json, и это из сервлета. Я получаю данные json от сервлета. Но я хочу только загрузить определенную часть. Как реализовать, пожалуйста, помогите мне.

Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*' 
    ]); 

    Ext.onReady(function(){ 
    Ext.define('Book',{ 
     extend: 'Ext.data.Model', 
     fields: [ 
      'sno', 
      'name', 'salary' 
     ] 
    }); 

    // create the Data Store 
    var store = Ext.create('Ext.data.Store', { 
     model: 'Book', 
     autoLoad: true, 
     proxy: { 
      // load using HTTP 
      type: 'ajax', 
      //url: 'http://localhost:8080/sampleweb/AccessServlet', 
      url: 'http://localhost:8080/sampleweb/DataServlet', 
      // the return will be XML, so lets set up a reader 
      reader: { 
       type: 'json', 
       root:'jsonObj' 
      } 
     } 
    }); 

     var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); 
     var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }); 
    // create the grid 
    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [ 
      {text: "sno",width:140, dataIndex: 'sno', sortable: true 
      ,editor: { 
       xtype: 'numberfield', 
       allowBlank: false, 
       minValue: 1, 
       maxValue: 150000 
      }}, 
      {text: "name", width: 180, dataIndex: 'name', sortable: true, 
      editor: { 
       xtype: 'combobox', 
       typeAhead: true, 
       triggerAction: 'all', 
       selectOnTab: true, 
       store: [ 
        ['Shade','Shade'], 
        ['Mostly Shady','Mostly Shady'], 
        ['Sun or Shade','Sun or Shade'], 
        ['Mostly Sunny','Mostly Sunny'], 
        ['Sunny','Sunny'] 
       ]}}, 
      {text: "salary", width: 180, dataIndex: 'salary', sortable: true, 
      editor: { 
       xtype: 'numberfield', 
       allowBlank: false, 
       minValue: 1, 
       maxValue: 1000000 
      }}, 
      { 
       xtype: 'actioncolumn', 
       width: 30, 
       sortable: true, 
       menuDisabled: true, 
       items: [{ 
        icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif', 
        handler: function(grid, rowIndex, colIndex) { 
         store.removeAt(rowIndex); 
        } 
       }] 
      } 
     ], 

     renderTo:'example-grid', 
     width: 560, 
     plugins: [rowEditing], 
     height: 400 
    }); 
}); 

Answer 1

Вам нужно пагинацию, посмотрите на example предоставленной Сенча. В принципе, все, что вам нужно сделать в интерфейсе, - это добавить и настроить один paging toolbar, а структура заботится обо всем остальном. Реальная работа находится на стороне сервера, где ваш сервлет должен будет анализировать параметры start и limit, включать их в запросы и возвращать соответствующие данные. Это пример запроса, генерируемого ExtJS, когда вы правильно включить панель инструментов подкачки:

{ 
//your request data 
.. 
start: 0, 
limit: 25 
} 

Этот запрос будет получать первые 25 строк. Конечно, вы можете настроить количество строк в приложении.

Answer 2

Вы просто должны добавить

limitParam : 10, 
pageParam :'pageNumber', 

в атрибуте прокси-магазина. Если вы хотите загрузить определенную страницу, используйте

grid.getStore().currentPage = The Page Number You Want To Load; 

перед погрузкой в ​​магазин.