Extjs Grid - callback store variable into pagingtoolbar - extjs

Question

I init store variable in 'initComponent' of gridpanel like
initComponent: function() {
var store = Ext.create('Ext.data.Store', {
model: 'MyDataObject',
pageSize:_end,
proxy: {
type: 'ajax',
url: myurl,
reader: {
type: 'json',
totalProperty: 'total', // total data, see json output
root: 'results' // see json output
}
}
});
this.store = store;
this.callParent(arguments);
this.store.load({params:{start:_star, limit:_end}
});
I call store in pagingtoolbar like
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
store: this.store,
pageSize: _end,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results'
}
]
In my gridpanel still have data but my bottom show "no results" like
I think problem is store: this.store,. How can i make it work thanks.

Answer 1

You can define a store like this
Ext.define('MyApp.store.MyDataStore', {
extend: 'Ext.data.Store',
model: 'MyDataObject',
storeId: 'myStoreId',
pageSize:_end,
proxy: {
type: 'ajax',
url: myurl,
reader: {
type: 'json',
totalProperty: 'total', // total data, see json output
root: 'results' // see json output
}
}
});
and then assign the myStoreId to the store-config of both the grid panel and the pagingtoolbar and the framework (the StoreManager) should create a single store which is assigned to both.
You can then either set autoload=true on your store or create a new store in initComponent of your grid and there do the loading manually.

Answer 2

I met this stranger problem yesterday,before I fixed this problem ,I guess the status were not synchronization of stores in both grid and pagingbar ,I spent a long to debug this problem with Firebug ,in other words the stores are not the same one ,they just the same instance of a store ,so you can fix this problem in two ways,the first is create a global variable of store,both them could share it the second is use bindStore method.for example support you have grid extension likes below
this.on('afterrender',function(){//this is grid itself
this.getBottomToolbar().bindStore(this.store)//set store of paggingtoolbar
},this);

Answer 3

I found the solution in here Remote paging grid in extjs
and the code must like:
this.store = store;
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: this.store,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: 'No results',
dock: 'bottom',
displayInfo: true,
pageSize: 22
}];
this.callParent(arguments);
this.store.load({params:{start:0, limit:22}});