ExtJS PagingToolbar trouble

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