title: How to add Paging on Grid Extjs
body: <p>I am using grid to show data which is working perfectly but now i want to add paging on grid. I have attached screenshot of paging which i want to apply as it is.</p>
  
  <p><a href="https://i.stack.imgur.com/nlNhd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nlNhd.png" alt="Grid Paging Screenshot"></a></p>
  
  <p>I am unable to use paging on my Grid. Please help me to fix this issue.
  I have attached my full code below</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  
   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();
                      }
                  },
  
  
  
              ]
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>My Output is -:
  <a href="https://i.stack.imgur.com/Y3lxu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y3lxu.png" alt="Output Screenshot"></a></p>