La pagination ne met pas à jour la vue lorsque vous cliquez sur le bouton suivant

Question

Le nombre total de lignes s'affiche correctement dans la pagination, mais la pagination ne met pas à jour la vue lorsque vous cliquez sur le bouton suivant.

Je suis nouveau à Sencha. En Mysql, je retourne toutes les lignes. Alors que je peux limiter du côté client. Si je limite les lignes dans le backend, je ne peux pas avoir toutes les lignes du côté client.

Vue: 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', 
      }, 
     }); 

magasin: Personnel.js

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

La façon dont vous utilisez le magasin, ExtJS fera une demande à chaque fois que vous changez la page, l'envoi le paramètre de numéro de page à l'URL définie pour le magasin. Si vous souhaitez effectuer une pagination côté client à l'aide d'ExtJS, vous devez définir le type de proxy de votre magasin sur memory, charger vos données dans le magasin, puis ExtJS Grid traitera la pagination comme prévu.

Faire une Ext.Ajax.Request comme ça:

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

Pour plusieurs domaines, vous pouvez faire un appel à Ext.data.JsonP.request() méthode et traiter la réponse comme indiqué dans le code ci-dessous:

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

Cochez cette case fiddle pour obtenir un exemple de travail complet.

Answer 3

bbar: { magasin: { Type: 'personnel', }, xtype: 'pagingtoolbar', displayInfo: true },

J'ai enlevé magasin à l'intérieur bbar et il fonctionne . Merci d'être coopératif.