Comment ajouter la pagination sur la grille Extjs

Question

J'utilise la grille pour montrer des données qui fonctionnent parfaitement mais maintenant je veux ajouter la pagination sur la grille. J'ai joint la copie d'écran de pagination que je veux appliquer comme il est.

Je ne peux pas utiliser la pagination sur ma grille. S'il vous plaît aidez-moi à résoudre ce problème. Je joins mon code complet ci-dessous

<script type="text/javascript"> 

Ext.define('User', { 
      extend: 'Ext.data.Model', 
      fields: ['name', 'email', 'age'] 

     }); 

    Ext.define('UserStore', { 
     extend: "Ext.data.Store", 
     model: 'User', 


     data: [ 
      { name: 'Test1', email: 'a@simpsons.com', age: 19 }, 
      { name: 'Test2', email: 'b@simpsons.com', age: 23 }, 
      { name: 'Test3', email: 'c@simpsons.com', age: 45 }, 
      { name: 'Test4', email: 'd@simpsons.com', age: 32 }, 
      { name: 'Test5', email: 'e@gmail.com', age: 22 }, 
       { name: 'Test6', email: 'f@gmail.com', age: 23 }, 
       { name: 'Abh', email: 'g@gmail.com', age: 22 }, 
       { name: 'Test7', email: 'ashu@gmail.com', age: 29 }, 
       { name: 'Gt', email: 'Gt@gmail.com', age: 24 }, 
       { name: 'Mg', email: 'Mg@gmail.com', age: 24 }, 


     ] 
    }); 
    var activityStore = Ext.create('UserStore'); 
    activityStore.load() 


    Ext.onReady(function() { 

     Ext.create('Ext.Panel', { 
      renderTo: Ext.getBody(), 

      margin: 4, 
      padding: 4, 
      width: 400, 
      title: 'Sample', 


      buttons: [ 
       { 
        text: 'Grid', handler: function() { 

         var model = new Ext.Window(
          { 

           width: 600, 
           autoScroll: true, 
           modal: false, 
           minimizable: true, 
           maximizable: false, 

           title: 'Students', 
           listeners: { 
            "minimize": function (window, opts) { 
             window.collapse(); 
             window.setWidth(150); 
             window.alignTo(Ext.getBody(), 'bl-bl') 


            } 
           }, 
           tools: [{ 
            type: 'restore', 
            handler: function (evt, toolEl, owner, tool) { 
             var window = owner.up('window'); 
             window.setWidth(600); 
             window.expand('', false); 
             window.center(); 
            } 
           }], 

           items: [{ 
            xtype: "grid", 

            store: activityStore, 

            title: 'Application Users', 
            columns: [ 
               { 
                text: 'Name', 
                width: 100, 
                align: "center", 
                sortable: false, 
                hideable: false, 
                dataIndex: 'name' 
               }, 
               { 
                text: 'Email Address', 
                width: 150, 
                sortable: false, 
                align: "center", 
                hideable: false, 
                dataIndex: 'email', 
               }, 

               { 
                text: 'Age', 
                flex: 1, 
                sortable: false, 
                hideable: false, 
                align: "center", 
                dataIndex: 'age' 
               } 


            ] 
           }] 
          }) 
         model.show(); 
        } 
       }, 



      ] 
     }); 
    }); 
    </script> 

Ma sortie est -:

Answer 1

Si vous voulez la pagination dans la grille, nous avons besoin d'ajouter la barre d'outils dans la grille en pagination donnant la propriété bbar de la grille.

bbar: Ext.create('Ext.PagingToolbar', { 
     store: activityStore, 
     displayInfo: true, 
     displayMsg: 'Displaying topics {0} - {1} of {2}', 
     emptyMsg: "No topics to display", 
     inputItemWidth: 35, 
    }) 

Et nous avons besoin de faire un magasin d'échange comme ici, vous utilisez data.We local doivent utiliser PagingMemory proxy.

Ext.define('UserStore', { 
     extend: "Ext.data.Store", 
     model: 'User', 
pageSize: 5, // records per page 
     proxy: { 
       type: 'memory', // paging memory proxy 
       enablePaging: true, 
data: [ 
      { name: 'Test1', email: 'a@simpsons.com', age: 19 }, 
      { name: 'Test2', email: 'b@simpsons.com', age: 23 }, 
      { name: 'Test3', email: 'c@simpsons.com', age: 45 }, 
      { name: 'Test4', email: 'd@simpsons.com', age: 32 }, 
      { name: 'Test5', email: 'e@gmail.com', age: 22 }, 
       { name: 'Test6', email: 'f@gmail.com', age: 23 }, 
       { name: 'Abh', email: 'g@gmail.com', age: 22 }, 
       { name: 'Test7', email: 'ashu@gmail.com', age: 29 }, 
       { name: 'Gt', email: 'Gt@gmail.com', age: 24 }, 
       { name: 'Mg', email: 'Mg@gmail.com', age: 24 }, 


     ],    
      } 


    }); 
    var activityStore = Ext.create('UserStore'); 
activityStore.loadPage(1); // loading first page 

complet Code: (affichage 5 enregistrements par page)

Ext.define('User', { 
      extend: 'Ext.data.Model', 
      fields: ['name', 'email', 'age'] 

     }); 

    Ext.define('UserStore', { 
     extend: "Ext.data.Store", 
     model: 'User', 
pageSize: 5, 
     proxy: { 
       type: 'memory', 
       enablePaging: true, 
data: [ 
      { name: 'Test1', email: 'a@simpsons.com', age: 19 }, 
      { name: 'Test2', email: 'b@simpsons.com', age: 23 }, 
      { name: 'Test3', email: 'c@simpsons.com', age: 45 }, 
      { name: 'Test4', email: 'd@simpsons.com', age: 32 }, 
      { name: 'Test5', email: 'e@gmail.com', age: 22 }, 
       { name: 'Test6', email: 'f@gmail.com', age: 23 }, 
       { name: 'Abh', email: 'g@gmail.com', age: 22 }, 
       { name: 'Test7', email: 'ashu@gmail.com', age: 29 }, 
       { name: 'Gt', email: 'Gt@gmail.com', age: 24 }, 
       { name: 'Mg', email: 'Mg@gmail.com', age: 24 }, 


     ],    
      } 


    }); 
    var activityStore = Ext.create('UserStore'); 
activityStore.loadPage(1); 

    Ext.onReady(function() { 

     Ext.create('Ext.Panel', { 
      renderTo: Ext.getBody(), 

      margin: 4, 
      padding: 4, 
      width: 400, 
      title: 'Sample', 


      buttons: [ 
       { 
        text: 'Grid', handler: function() { 

         var model = new Ext.Window(
          { 

           width: 600, 
           autoScroll: true, 
           modal: false, 
           minimizable: true, 
           maximizable: false, 

           title: 'Students', 
           listeners: { 
            "minimize": function (window, opts) { 
             window.collapse(); 
             window.setWidth(150); 
             window.alignTo(Ext.getBody(), 'bl-bl') 


            } 
           }, 
           tools: [{ 
            type: 'restore', 
            handler: function (evt, toolEl, owner, tool) { 
             var window = owner.up('window'); 
             window.setWidth(600); 
             window.expand('', false); 
             window.center(); 
            } 
           }], 

           items: [{ 
            xtype: "grid", 

            store: activityStore, 

            title: 'Application Users', 
            columns: [ 
               { 
                text: 'Name', 
                width: 100, 
                align: "center", 
                sortable: false, 
                hideable: false, 
                dataIndex: 'name' 
               }, 
               { 
                text: 'Email Address', 
                width: 150, 
                sortable: false, 
                align: "center", 
                hideable: false, 
                dataIndex: 'email', 
               }, 

               { 
                text: 'Age', 
                flex: 1, 
                sortable: false, 
                hideable: false, 
                align: "center", 
                dataIndex: 'age' 
               } 


            ], 
            bbar: Ext.create('Ext.PagingToolbar', { 
      store: activityStore, 
      displayInfo: true, 
      displayMsg: 'Displaying topics {0} - {1} of {2}', 
      emptyMsg: "No topics to display", 
      inputItemWidth: 35, 
     }), 
           }] 
          }) 
         model.show(); 
        } 
       }, 



      ] 
     }); 
    });