Extjs5 - UI Клиентская сторона GRID pagination

Question

Я использую ExtJs5 с Grails 2.4.4. Я хочу разбиение страницы на стороне клиента на сетку Extjs без вызова серверной части. Я прошел через много форумов, которые ищут входы на разбиение страницы на стороне клиента, но везде я вижу, как использовать прокси-сервер памяти. Я использую прокси-вызов Ajax для контроллера grails и загрузку магазина. Не могли бы вы помочь мне в решении этого вопроса и предоставить указателям, чтобы работать с постраничной страницей клиента? Ниже вы найдете мой код. Я совершенно не знаком с extjs. Поэтому, пожалуйста, извините, если есть некоторые основные ошибки. Вид:

Ext.define('MVC.GridPanel', { 
alias: 'app.gridPanelAlias', 
extend : 'Ext.grid.Panel', 
xtype : 'BookView', 

title : Books, 

store : 'Book', 

multiSelect: true, 

requires: ['Ext.grid.column.CheckColumn'], 

columns: [ 
     {text: "Select", dataIndex: 'Selected', xtype: 'checkcolumn', width:25}, 
     {text: "Book Number", width: 55, dataIndex: bookNumber, sortable: true}, 
     {text: "Received", width: 50, dataIndex: 'receivedDate', sortable: true, renderer: render_date}, 
],  
dockedItems: 
[ 
    { xtype: 'pagingtoolbar', 
     dock: 'bottom', 
     displayMsg: '{0} - {1} of {2}', 
     emptyMsg: 'No data to display', 
     store: 'Book', 
     displayInfo: true 
    } 
], 
forceFit: true, 
height:210, 
split: true, 
region: 'north' 
}); 

Магазин:

Ext.define('MVC.store.Book', { 
extend : 'Ext.data.Store', 

requires : [ 
    'MVC.model.Book' 
], 
config: { 
storeId : 'Book', 
model : 'MVC.model.Book', 
pageSize : 5, 
proxy: { 
    type: 'ajax', 
    url: '/Book/getBooks', 
    actionMethods :{ 
     read : 'POST' 
     }, 
    reader: { 
     type: 'json', 
     rootProperty: 'books', 
     totalProperty: 'total' 
    } 
} 
} 

}); 

Модель:

Ext.define('MVC.model.Book', { 
extend: 'Ext.data.Model',  
fields: [ 
    { name: 'Selected', type: 'bool' }, 
    { name: 'BookNumber', type: 'string' }, 
    { name: 'Received', type: 'date'} 
] 
}); 

магазин вызывается щелчком опции в аккордеона панели.

var store = Ext.getStore('Book'); 
store.load({ 
params: { 
    start: 0, 
    limit: 5 
} 
}); 

JSON ответ от сервера для указанного выше вызова Ajax -

{ "всего": 40, "успех": правда, "bookOrders": [{ "bookNumber": "11111", "receivedDate": нулевая}, { "bookNumber": "222222", "receivedDate": нулевая}]}

Answer 1

в прокси-сервере у вас есть 'rootProperty' установлен на 'книгу', но в ответ сервера есть это свойство booksOrders. Они должны быть одинаковыми, поэтому либо измените значение «rootProperty», либо имя этого свойства в ответе сервера.

proxy: { 
    type: 'ajax', 
    url: '/Book/getBooks', 
    actionMethods :{ 
     read : 'POST' 
     }, 
    reader: { 
     type: 'json', 
     rootProperty: 'bookOrders', // here 
     totalProperty: 'total' 
    } 
} 

---

{ 
"total": 40, 
"success": true, 
"bookOrders": [{ 
    "bookNumber": "11111", 
    "receivedDate": null 
}, { 
    "bookNumber": "222222", 
    "receivedDate": null 
}] 
} 

То же самое в вашем определении модели. Все ваши поля должны быть такими же, как и в случае с тем же случаем.

Ext.define('MVC.model.Book', { 
    extend: 'Ext.data.Model',  
    fields: [ 
     { name: 'Selected', type: 'bool' }, // nu such field in your response 
     { name: 'bookNumber', type: 'string' }, 
     { name: 'receivedDate', type: 'date'} 
    ] 
}); 

Также нет необходимости добавлять какие-либо параметры при вызове метода загрузки магазина. Этого должно быть достаточно.

store.load(); 

UPDATE

Если у вас есть контроль над бэкэндом, то вы должны написать логику, чтобы вернуть выбранную страницу. Если не пытаться добавить еще один прикован магазин (PagedBook):

Ext.define('MVC.store.PagedBook', { 
    extend: 'Ext.data.ChainedStore', 
    requires: [ 
     'MVC.store.Book' // *** 
    ], 
    storeId: 'PagedBook', 
    model: 'MVC.model.Book', 
    pageSize: 5, 

    source: 'Book', // *** 
    loadPage: function(page) { // DIDN'T TEST IT WELL, MAY WORK INCORRECT *** 
     var i = 0, 
      pageSize = this.getPageSize(); 

     this.clearFilter(); 
     this.filterBy(function(rec) { 
      var result = i >= (page - 1) * pageSize && i < page * pageSize; 
      i = i + 1; 
      return result; 
     }); 
    } 

}); 

И затем использовать его в сетке и панели инструментов подкачки:

Ext.define('MVC.GridPanel', { 
    alias: 'app.gridPanelAlias', 
    extend: 'Ext.grid.Panel', 
    xtype: 'BookView', 

    title: Books, 

    store: 'PagedBook',     // *** 

    multiSelect: true, 

    requires: ['Ext.grid.column.CheckColumn'], 

    // ... 
    dockedItems: [{ 
     xtype: 'pagingtoolbar', 
     dock: 'bottom', 
     displayMsg: '{0} - {1} of {2}', 
     emptyMsg: 'No data to display', 
     store: 'PagedBook',    // *** 
     displayInfo: true 
    }], 
    // ... 
});