1
我試圖更新一個pagingtoolbar的信息，如果它的底層存儲更改。假設我有以下代碼。Ext JS 4：更新網格的PagingToolbar
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和store.loadPage函數上使用moveFirst函數，但是這給了我一個「結果未定義」的Firebug錯誤。我也嘗試過this SO answer，但這似乎沒有做任何事情......我試過的最後一件事是在店鋪填充了數據後添加了一個PagingToolbar，但顯然沒有。