ページングをグリッドExtjsに追加するには

Question

グリッドを使用して、完全に動作しているデータを表示していますが、グリッドにページングを追加します。私はそれがそのまま適用したいページングのスクリーンショットを添付しました。

私はグリッド上でページングを使用することができません。この問題を解決するのを手伝ってください。 私は

<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> 

の下に私の完全なコードを添付している私の出力がある - ：あなたはグリッドにページングをしたい場合は

Answer 1

、我々はグリッドのbbar性質を与えることによって、グリッド内の改ページのツールバーを追加する必要があります。

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

そして、私たちは、あなたが地元のdata.Weを使用しているとして、ここではページングストアを作成する必要がありPagingMemoryプロキシを使用する必要があります。

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 

全コード：私を助けるために（ページあたり5つのレコードを表示）

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



      ] 
     }); 
    });