I'm trying to update a pagingtoolbar's information if its underlying store changes. Let's say I have the following code.
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
});
When you run this code, the grid contains all of the data (no paging). However, if you comment/uncomment the lines that I tell you to, the grid contains the correct amount of data per page.
What I want to know is, how can I update the PagingToolbar to correctly page the data that I added to the store? I've tried using the moveFirst function on the PagingToolbar and the store.loadPage function, but that gives me a Firebug error of "result is undefined." I've also tried this SO answer, but that didn't seem to do anything... The last thing I tried was adding a PagingToolbar after the store had been populated with its data, but obviously no go.
This is my working solution (changes have comments above them).
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'}
]
});
// Excluding the proxy from the store
var store = Ext.create('Ext.data.Store', {
model: 'model',
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')]
}]
});
// Manually setting the proxy and loading the store
store.setProxy({
type: 'pagingmemory',
data: data
});
store.load();
});
I've exclued the proxy from the definition of the store, and when it comes time to loading the data in the store, I call the setProxy function, declare it as pagingmemory, and set the data. Then you have to load the store.
Not really sure why loadData/loadRawData doesn't work... I was trying to trace them in Firebug and only saw the data not being defined somewhere in the core Ext code, but if I had hardcoded the data in the store, it was defined (at the same line of code)... guess it could be a bug? Either way, this fix works for me.