ExtJS PagingToolbar проблема

Question

Я начинаю в extJS. У меня проблемы с PagingToolbar и Store. Когда я нажимаю на «следующую страницу», 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"}]}

Ps: Извините за мой английский =)

Answer 1

Я думаю, ваша проблема в том, что каждый раз, когда вы нажимаете на кнопку, создается новый магазин, а в процессе - новый объект Reader.

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

Так что, если вы нажмете на кнопку, что случается:

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

Так, недавно созданный магазин получает один и тот же результат, что и оригинал. То, что вы должны делать это создание хранилища в пространстве имен объектов (это) во время инициализации, а не после:

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

Успехов, Роб