Да, свойство store.totalCount содержит общее количество записей, возвращенных по последнему запросу.Но я считаю, что это не правильный подход.Вот что говорит доктор о pagingtoolbar :
По мере увеличения числа записей время, необходимое браузеру для их рендеринга, увеличивается.Пейджинг используется для уменьшения объема данных, которыми обмениваются с клиентом.Примечание: если в доступной области экрана больше записей / строк, чем можно просмотреть, будут добавлены вертикальные полосы прокрутки.
Пейджинг обычно обрабатывается на стороне сервера (см. Исключение ниже).Клиент отправляет параметры на сторону сервера, которые сервер должен интерпретировать, а затем ответить соответствующими данными.
Ext.toolbar.Paging - это специализированная панель инструментов, связанная с Ext.data.Store и предоставляющаяавтоматическое управление пейджингом.Этот компонент загружает блоки данных в хранилище, передавая параметры, используемые для критериев подкачки.
В этом случае вы запрашиваете, чтобы сервер возвращал только то количество, которое вы хотите отобразить (флажок снят)) или вся информация (флажок установлен).
Зная это, согласны ли вы с тем, что не имеет большого смысла изменять размер страницы в соответствии с объемом данных, поступающих в последнем запросе?Эта сумма может быть устаревшей, если с момента последнего запроса произошли изменения.
Было бы более интересно адаптировать серверную часть, возвращая все данные, когда флажок установлен, или после разбивки на страницы (параметры start иlimit).
Я создал эту скрипку для иллюстрации: Extjs Grid Pagination .
Также взгляните на файл Data / users.json.
Вот что говорит док о store.pageSize свойство :
Количество записей, которые считаются «страницей».Это используется для включения встроенного пейджинга с использованием функций nextPage и previousPage, когда сетка выполняется с помощью Ext.toolbar.Paging По умолчанию 25.
Чтобы отключить пейджинг, установите для pageSize значение 0.
Не забывайте, что сервер всегда должен возвращать итоговые записи (totalCount), чтобы pagingtootbar мог правильно смонтировать пейджинг.
proxy.setExtraParam добавляет параметрна прокси.Это приводит к отправке параметра везде, куда загружается хранилище.
Код Extjs:
var store = Ext.create('Ext.data.Store',{
pageSize: 10,
//pageSizeDefault avoid a hardcode below (line 49)
pageSizeDefault: 10,
proxy : {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
rootProperty: 'root',
totalProperty: 'totalCount', //<= This should be returned from the backend
successProperty: 'success'
}
},
fields : [
'userid', 'name', 'email', 'phone'
],
listeners: {
load: function(store){
console.log('totalCount => ', store.getTotalCount());
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Teste',
autoLoad: true,
tools: [
{
xtype: 'checkbox',
itemId: 'showAllCheckbox',
boxLabel: 'Show All',
listeners: {
change: {
fn: function(field, newValue, oldValue, eOpts) {
var store = field.up('grid').getStore();
//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
if(newValue) {
store.setPageSize(0);
store.getProxy().setExtraParam('limit', 0);
}else {
store.setPageSize(store.pageSizeDefault);
store.getProxy().setExtraParam('limit', store.pageSizeDefault);
}
store.reload();
}
}
}
}
],
columns: [
{ text: 'Name', dataIndex: 'name', flex: 3},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true,
items:[
{
xtype: 'button',
handler: function(){
alert('click');
}
}
]
}]
});
var wnd = Ext.create('Ext.window.Window',{
layout:'fit',
maximized: true,
title: 'Example of pagination'
}).show();
wnd.add(grid);
Пример кода бэкенда:
var data = [
{userid: "1", name: "user1", email: "user1@email.com", phone: "+55999999991"},
{userid: "2", name: "user2", email: "user2@email.com", phone: "+55999999992"},
{userid: "3", name: "user3", email: "user3@email.com", phone: "+55999999993"},
{userid: "4", name: "user4", email: "user4@email.com", phone: "+55999999994"},
{userid: "5", name: "user5", email: "user5@email.com", phone: "+55999999995"},
{userid: "6", name: "user6", email: "user6@email.com", phone: "+55999999996"},
{userid: "7", name: "user7", email: "user7@email.com", phone: "+55999999997"},
{userid: "8", name: "user8", email: "user8@email.com", phone: "+55999999998"},
{userid: "9", name: "user9", email: "user9@email.com", phone: "+55999999999"},
{userid: "10", name: "user10", email: "user10@email.com", phone: "+55999999910"},
{userid: "11", name: "user11", email: "user11@email.com", phone: "+55999999911"},
{userid: "12", name: "user12", email: "user12@email.com", phone: "+55999999912"},
{userid: "13", name: "user13", email: "user13@email.com", phone: "+55999999913"},
{userid: "14", name: "user14", email: "user14@email.com", phone: "+55999999914"},
{userid: "15", name: "user15", email: "user15@email.com", phone: "+55999999915"},
{userid: "16", name: "user16", email: "user16@email.com", phone: "+55999999916"},
{userid: "17", name: "user17", email: "user17@email.com", phone: "+55999999917"},
{userid: "18", name: "user18", email: "user18@email.com", phone: "+55999999918"},
{userid: "19", name: "user19", email: "user19@email.com", phone: "+55999999919"},
{userid: "20", name: "user20", email: "user20@email.com", phone: "+55999999920"}
];
var totalCount = data.length;
if(params.limit > 0){
data = data.slice(params.start, params.start + params.limit);
}
return {success: true, root: data, totalCount: totalCount};
КомуВ заключение я хотел бы упомянуть некоторые замечания, которые я считаю важными.Я знаю, что вы начинаете с Extjs, поэтому, пожалуйста, поймите как положительный отзыв:
- Избегайте нарушения инкапсуляции классов.Обратите внимание, что в fiddle я получил доступ к тому же свойству
store.pageSize, однако я использовал метод store.getPageSize() вместо прямого доступа к свойству.То же самое касается store.getTotalCount(). - Действительно ли необходимо дать пользователю возможность переносить все данные (флажок Показать все), если целью
pagingtoolbar является именно сокращение объема передаваемой информации, следовательно, уменьшая время и вычислительное потребление? - Я видел, что в методе
onUserStoreBeforeLoad свойство хранилища изменяется в соответствии со значением флажка.Интересно проанализировать, какой компонент больше зависит от другого, чтобы знать, куда поместить код.В этом случае флажок изменяет поведение магазина.Этот фрагмент может быть внутри метода checkbox change.В текущей форме вам все равно придется удалить метод onUserStoreBeforeLoad, но, как предлагается, удаление этого компонента не повлияет на код.Было ясно?
Примечание: английский не мой родной язык, и я все еще учусь.
Есть вопросы, пожалуйста, прокомментируйте.
Надеюсьэто помогает.