ExtJS PagingToolbar故障

Question

我是extJS的新手。我在使用PagingToolbar和商店时遇到麻烦。当我点击“下一页”时，PagingToolbar可以正常工作，但是网格没有更新。为什么会发生这种情况？请帮帮我。这是我的代码：`

    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响应

{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"}]}

附言:对不起，我的英语=)

Answer 1

我认为您的问题在于，每次单击该按钮时，都会创建一个新的存储，并在此过程中创建一个新的Reader对象。

getStore: function(){
        this.store = new Ext.data.Store({
....

因此，如果您单击该按钮，将会发生以下情况：

grid.getStore().reload();
//GridInstance.createANewStoreForMe(andCreateANewReaderForYourself).reload

因此，新创建的存储将获取与原始存储完全相同的结果。您应该做的是在初始化期间在对象命名空间(this)中创建存储，而不是在初始化之后：

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({});

祝你好运，Rob