그리드 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, 
    }) 

는 그리고 우리는 당신이 PagingMemory 프록시를 사용할 필요가 지역 data.We을 사용하는 등 여기 페이징 저장소를 확인해야합니다.

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



      ] 
     }); 
    });