ExtJS PagingToolbar trouble - extjs

Question

I novice in extJS.
I have trouble with PagingToolbar and Store. When I click to 'next page' PagingToolbar works correctly , but the gride don't update. Why is this happening? Help me please.
This's my code:
`
getJsonReader: function(){
this.JsonReader = new Ext.data.JsonReader({
totalProperty: 'results',
root: 'data',
idProperty: 'id',
fields: [
{name:'id', type: 'int', allowBlank: false},
{name: 'firstName', allowBlank: false},
{name: 'lastName', allowBlank: false},
{name: 'middleName',allowBlank: false},
{name: 'fotoTeacher',allowBlank: false}
]
});
return this.JsonReader;
},
getStore: function(){
this.store = new Ext.data.Store({
id: 'store-teachers',
reader: this.getJsonReader(),
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'admin/get_teachers'
}),
autoLoad: {params:{start:0, limit:3}},
listeners: {
load: function()
{
if(jQuery('#panel-editTeacherHtml').length)
{
//remove attention
jQuery('#panel-editTeacherHtml').remove();
}
Ext.getCmp('grid-editTeacher').show();
},
exception: function()
{
Ext.getCmp('grid-editTeacher').hide();
if(!document.getElementById('panel-editTeacherHtml'))
{
Ext.DomHelper.insertAfter('panel-editTeacher-refreshButton',{
id: 'panel-editTeacherHtml',
html:'Увы, но нет ни одного преподавателя =('
});
}
}
}
});
return this.store;
},
titleTeacherfoto: function(val)
{
return '<img src="'+val+'" />';
},
getGrid: function(){
this.grid = new Ext.grid.GridPanel({
frame : true,
autoHeight:true,
id:'grid-editTeacher',
loadMask: true,
store: this.getStore(),
sm: new Ext.grid.CheckboxSelectionModel({
singleSelect: false,
checkOnly: true
}),
cm: new Ext.grid.ColumnModel({
{header: 'Фамилия', dataIndex: 'lastName'},
{header: 'Имя', dataIndex: 'firstName', sortable: false},
{header: 'Отчество', dataIndex: 'middleName', sortable: false},
{header: 'Фотография', dataIndex: 'fotoTeacher', renderer: this.titleTeacherfoto}
],
defaultSortable: true
}),
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
id:'pager-editTeacher',
displayInfo: true,
displayMsg: 'Преподаватели {0} - {1} из {2}',
beforePageText: 'Страница',
afterPageText: 'из {0}',
prependButtons: true,
pageSize: 3,
store: this.getStore()
})
})
return this.grid;
},
getPanel: function(){
return new Ext.Panel({
frame: true,
bodyStyle: 'padding:5px;',
id: 'panel-editTeacher',
autoScroll: true,
title: 'Панель редактирования преподавателей',
items: [{
xtype: 'button',
text: 'Обновить',
iconCls: 'refresh',
id:'panel-editTeacher-refreshButton',
style: 'margin-bottom:10px',
listeners:{
click: function(){
grid = Ext.getCmp('grid-editTeacher');
grid.getStore().reload();
Ext.getCmp('pager-editTeacher').doRefresh();
}
}
},
this.getGrid()
]
});
}
Ajax responce
{success:true,
results:5,
data:[{"id":"1","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"2","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"3","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"}]}
P.s: Sorry for my english =)

Answer 1

I think your problem is that every time you click the button, a new store is created, and in the process a new Reader object.
getStore: function(){
this.store = new Ext.data.Store({
....
So if you click the button, what happens is:
grid.getStore().reload();
//GridInstance.createANewStoreForMe(andCreateANewReaderForYourself).reload
So, the newly created store fetches the exact same result as the original one.
What you should be doing is creating the store in the objects namespace (this) during initialization, and not afterwards:
MyApp.MyClass = Ext.extend(Ext.grid.Grid, {
initComponent: function () {
this.store = new Ext.data.Store({
...
});
// create config object
var config = {
store : store,
...
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
MyApp.MyClass.superclass.initComponent.call(this);
} // eo function initComponent
,getStore: function() {
return this.store;
// Or this.getStore(); in the case of this class (Grid which is always able to return it's own store)
}
}); // eo extend
var myGrid = new MyApp.MyClass({});
Good luck,
Rob