Pagination for EXTJS 4.2 grid

Question

I have a ext js 4.2 grid with two locked columns.Now i want to add feature of pagination in in my grid.I want it to look like a progress bar pager given on the link http://docs.sencha.com/extjs/4.2.4/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#progress-bar-pager Now how can i convert my grid to progress bar pager grid with pagination feature. My current code is

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title id='title'>HTML Page setup Tutorial</title>       
        <link rel="stylesheet" type="text/css" href="ext-all.css" />       
        <script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function() {

   var field=[];   
    var columnList = [];


  var counter = {"levels":

  [
  {"name":"class","samples":[
                          {"name":"1660SH_3","features":[{"count":8,"name":"Bacteroidia"},{"count":9,"name":"Bacteroidiaa"}]},
                          {"name":"1660SH_4","features":[{"count":5,"name":"Bacteroidia"},{"count":6,"name":"Bacteroidiaa"}]}]},
  ]};


      columnList.push({header: "Sample v/s Feature", dataIndex : "Sample v/s Feature",width:0.1*Ext.getBody().getViewSize().width,columnLines: true,locked:true});
      field.push("Sample v/s Feature");
        for(var p=0;p<Object.keys(counter.levels[0].samples).length;p++)
        {

        columnList.push({header: counter.levels[0].samples[p].name, dataIndex : counter.levels[0].samples[p].name,flex:1,columnLines: true});
        field.push(counter.levels[0].samples[p].name);
        }
        var Grid7Store = new Ext.data.ArrayStore({
            fields: field,
            data: [] });





      if(counter.levels[0].name=='class')
      {
        var classTable= Ext.create('Ext.grid.Panel',{
          style: 'border: solid Blue 1px',
          id:'family',
          renderTo:Ext.getBody(),
           store :Grid7Store,

          columns : columnList,
          columnLines: true,
          width:Ext.getBody().getViewSize().width,
          height: Ext.getBody().getViewSize().height

      });
         for(var p=0;p<Object.keys(counter.levels[0].samples[0].features).length;p++)
        {
            var s={};
            s["Sample v/s Feature"]='<b>'+counter.levels[0].samples[0].features[p].name+'</b>';
            for(var j=0; j< Object.keys(counter.levels[0].samples).length ;j++)
            {
                s[counter.levels[0].samples[j].name]=counter.levels[0].samples[j].features[p].count;
            }
            Grid7Store.add(s);
        }
      }














});
</script>
  </head>
    <body>

    </body>
</html>

Have you tried to copy the relevant parts from the sample you linked to? Like xtype: 'pagingtoolbar' and pageSize: 10 and everything else that sounds like it could be relevant for paging? — Alexander
@Alexander i have edited my code and tried a bit but it did not work.... — Prateek Ratnaker

Alexander Alexander · Accepted Answer · 2016-02-18T18:08:48

Your code is missing the following crucial parts from the original example code:

Ext.require([
    'Ext.ux.ProgressBarPager'
]);

and

plugins: new Ext.ux.ProgressBarPager()

and

proxy: {
    type: 'memory',
    enablePaging: true,
    data: myData
    reader: {
        type: 'array'
    }
}

I have made a fiddle.

Pagination for EXTJS 4.2 grid

1 Answers