ExtJS PagingToolbar trouble

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

シモンズ：私の英語のため申し訳ありません=）

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

幸運を、 ロブ