다음 단추를 클릭 할 때 페이지 매김이보기를 업데이트하지 않습니다.

Question

총 행 수가 페이지 매김에 올바르게 표시되어 있지만 다음 단추를 클릭 할 때 페이지 매김이보기를 업데이트하지 않습니다.

나는 Sencha를 처음 사용했습니다. MySQL에서는 모든 행을 반환합니다. 그래서 나는 클라이언트 측에서 제한 할 수 있습니다. 백엔드에서 행을 제한하면 클라이언트 측에서 모든 행을 가질 수 없습니다.

보기 : List.js

/*** This view is an example list of people. 
    */ 



Ext.define('CRUD.view.main.List', { 
      extend: 'Ext.grid.Panel', 
      xtype: 'home', 
      requires: [ 
       'CRUD.store.Personnel' 
      ], 

      title: 'Heroes', 
      plugins: [ 
       Ext.create('Ext.grid.plugin.CellEditing', { 
        clicksToEdit: 1 
       }) 
      ], 
      layout: 'fit', 
      fullscreen: true, 
      store: { 
       type: 'personnel', 
      }, 
      columns: [ 
       { text: 'Name', dataIndex: 'name', sortable: true, flex: 1 }, 
       { text: 'Email', dataIndex: 'email', sortable: true, flex: 1 }, 
       { text: 'Phone', dataIndex: 'phone', sortable: true, flex: 1 } 
      ], 
      bbar: { 
       store: { 
        type: 'personnel', 
       }, 
       xtype: 'pagingtoolbar', 
       displayInfo: true 
      }, 
      // columns: [ 
      //  { text: 'Name', dataIndex: 'name', flex: 1 }, 
      //  { text: 'Email', dataIndex: 'email', flex: 1 }, 
      //  { text: 'Phone', dataIndex: 'phone', flex: 1 } 
      // ], 

      listeners: { 
       select: 'onItemSelected', 
      }, 
     }); 

스토어 :

Ext.define('CRUD.store.Personnel', { 
     extend: 'Ext.data.Store', 

     alias: 'store.personnel', 

     model: 'CRUD.model.User', 

     id: 'list', 

     fields: [ 
      'name', 'email', 'phone' 
     ], 

     // data: [ 
     //  { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" }, 
     //  { name: 'Worf', email: "worf.moghsson@enterprise.com", phone: "555-222-2222" }, 
     //  { name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" }, 
     //  { name: 'Data', email: "mr.data@enterprise.com", phone: "555-444-4444" } 
     // ], 
     autoLoad: { 
      start: 0, 
      limit: itemsPerPage 
     }, 
     buffered: true, 
     pageSize: itemsPerPage, 
     remoteSort: true, 
     proxy: { 
      type: 'jsonp', //cross domain calls - json parser 
      url: 'http://localhost:8080/list', 
      enablePaging: true, 
      reader: { 
       type: 'json', 
       totalProperty: 'total' 
      }, 

     }, 
     // proxy: { 
     //  type: 'memory', 
     //  reader: { 
     //   type: 'json', 
     //  } 
     // }, 

}); 

Answer 1

당신이 저장소를 사용하는 방법 Personnel.js, ExtJS로가 요청 당신이 페이지를 변경할 때마다 할 것, 전송 상점에 설정된 URL에 페이지 x 호 매개 변수.

ExtJS를 사용하여 클라이언트 측 페이지 매김을 수행하려면 상점의 프록시 유형을 memory으로 설정하고 데이터를 상점에로드 한 다음 ExtJS Grid가 원하는대로 페이지 매김을 처리해야합니다. 당신이 Ext.data.JsonP.request() 메소드에 호출을 아래 코드와 같이 응답을 처리 할 수있는 크로스 도메인에 대한

Ext.Ajax.request({ 
    url: 'http://localhost:8080/list', 
    success: function(response) { 
     dataStore.setProxy({ 
      type: "memory", 
      enablePaging: true, 
      data: Ext.JSON.decode(response.responseText) //here you need to adapt to your response structure 
     }); 
     dataStore.load(); 
    } 
}); 

Answer 2

:

그 같은 Ext.Ajax.Request를 수행합니다 :

Ext.data.JsonP.request({ 
     url: 'data1.json', 
     success: function (response) { 
      var myData = []; 
      Ext.Array.forEach(response.data, function (item) { 
       myData.push({ 
        name: item.name, 
        email: item.email, 
        phone: item.phone 
       }); 
      }); 
      store.setProxy({ 
       type: "memory", 
       enablePaging: true, 
       data: myData 
      }); 
      store.load(); 
     } 
    }); 

전체 작업 예제는 fiddle을 확인하십시오.

Answer 3

bbar : { 가기 : { 유형 : '인사', }, 위해 xtype : 'pagingtoolbar', displayInfo : 사실 는},

나는 bbar 내부 저장소를 제거하고 그것은 작동 . 협조 해 주셔서 감사합니다.