基になるストアが変更された場合、ページングツールバーの情報を更新しようとしています。次のコードがあるとしましょう。
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 を更新して、ストアに追加したデータを正しくページングするにはどうすればよいかということです。PagingToolbar の moveFirst 関数と store.loadPage 関数を使用してみましたが、「結果が定義されていません」という Firebug エラーが発生します。私もこの SO answerを試しましたが、何もしなかったようです...最後に試したのは、ストアにデータが入力された後に PagingToolbar を追加することでしたが、明らかにうまくいきませんでした。