Я пытаюсь обновить информацию pagingtoolbar, если ее базовое хранилище изменится. Предположим, у меня есть следующий код.Ext JS 4: Обновление панели PagingToolbar Grid
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);
Ext.onReady(function() {
var data = [
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'},
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'}
];
Ext.define('model', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'model',
proxy: {
type: 'pagingmemory'
},
extraParams: {
start: 0,
limit: 1
},
//data: data, // uncomment this
pageSize: 7,
remoteSort: false
});
Ext.define('mygrid', {
extend: 'Ext.grid.Panel',
store: store, // initially just an empty store
id: 'grid',
dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: store,
displayInfo: true
}],
columnLines: true,
height: 700,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
align: 'center'
}, {
header: 'Phone',
dataIndex: 'phone',
flex: 1,
align: 'center'
}]
});
Ext.create('Ext.Viewport', {
layout: 'border',
title: 'My viewport!',
items: [{
region: 'center',
items: [Ext.create('mygrid')]
}]
});
store.loadRawData(data); // comment this out
/*grid.addDocked({
xtype: 'pagingtoolbar',
store: store,
displayInfo: true,
dock: 'bottom',
pageSize: 7
});*/ // doesn't work
//Ext.getCmp('grid').getDockedItems()[0].moveFirst(); // doesn't work
//store.loadPage(1); // doesn't work
});
При запуске этого кода сетка содержит все данные (без пейджинга). Однако, если вы прокомментируете/раскомментируете строки, о которых я вам расскажу, сетка содержит правильное количество данных на странице.
Что я хочу знать, как я могу обновить PagingToolbar для правильной страницы данных, которые я добавил в магазин? Я попытался использовать функцию moveFirst на PagingToolbar и функцию store.loadPage, но это дает мне ошибку Firebug «результат не определен». Я также пробовал this SO answer, но это, похоже, ничего не делало ... Последнее, что я попробовал, - это добавить PagingToolbar после того, как в хранилище были занесены его данные, но, очевидно, нет.