Pagination in EXT-JS4 Not working

Question

I am stuck with the pagination in EXT js 4.1.0. I implemented the pagination its showing the proper count but grid is not updating as per the pages refresh.

  Ext.define('person', {
                extend: 'Ext.data.Model',
                fields: [
                    // the 'name' below matches the tag name to read, except 'availDate'
                    // which is mapped to the tag 'availability'
                    {name: 'sso', type: 'string'},
                    {name: 'fname', type: 'string'},
                    // dates can be automatically converted by specifying dateFormat
                    {name: 'lname', type: 'string'},
                    {name: 'msso', type: 'string'},
                    {name: 'email_address', type: 'string'},
                    {name: 'person_status', type: 'string'}                     
                ]
            });

  var ds = new Ext.data.Store({
            model:'person',
              autoLoad: true, 
            //url:'/FormAction',
             actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
         proxy: {  
             type: 'ajax',      
             url: '/identityiq/FormAction',       
             reader: {      
                 type: 'xml',
                 record: 'record'
              },
           }                

            });

    ds.load({
    params:{
        start:0,
        limit: 25
    }
 });

   var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1,
                listeners: {
                    validateedit: function(editor, e) {
                        //alert('New value (validateedit): ' + e.value);
                    },
                    edit: function(editor, e) {
                        //alert('Old value (edit): ' + e.value);
                    }
                }
            });

   // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: ds,
    dockedItems:[
{
    xtype: 'pagingtoolbar',
    pageSize: 25,
    store:ds,
    dock: 'bottom',
    displayInfo: true,
    displayMsg:'Displaying records {0} - {1} of {2}  ',
    emptyMsg:"No records to display ",
    flex:1
}
   ],           columns: [
        {
            text     : 'SSO',
            width:80,
            sortable : true,
            dataIndex: 'sso'
        },
        {
                    id: 'fname',
                    header: 'First Name',
                    dataIndex: 'fname',
                    width:100,                      
                    field: {
                        allowBlank: false
                    }
        },
        {

            id: 'lname',
            header     : 'Last Name',
            width:100,              
            sortable : true,
            dataIndex: 'lname',
            field: {
                        allowBlank: false
                    }
        },
        {
            text     : 'Manager SSO',
            width    : 80,
            sortable : true,               
            dataIndex: 'msso'
        },
        {
            text     : 'Email Address',
            width    : 200,
            sortable : true,               
            dataIndex: 'email_address'
        },
        {
            text     : 'Personstatus',
            width    : 80,
            sortable : true,               
            dataIndex: 'person_status'
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },
    height: 400,
    width: 700,
    title: 'Array Grid',
    renderTo: 'myDiv',
    viewConfig: {
        stripeRows: true,
        enableTextSelection: true
    },
    frame: true,        
    plugins: [cellEditing],
    tbar: [
 {
     text: 'Save',


     handler: function ()
     {
        alert(ds.getModifiedRecords());
        console.log(ds.getModifiedRecords());

        var modified_data ={};
        modified_data = ds.getModifiedRecords();

        for (var i = 0; i < modified_data.length; i++) {
                var record = modified_data[i];                  
                alert(record.data.fname);
        }
}
 }
 ],
});

Tried different versions given in the different forums but no luck. Grid don't refresh with the change in the pages.

Also will there need any change in server side for implementing pagination.

Thanks in Advance.

• Ash

Thanks for reply. Please find my server side code, its a simple Servlet with this process method - Please suggest me what i need to change in order to work pagination.

try {

        ServletOutputStream  sos = response.getOutputStream();
        response.setHeader("Cache-Control","no-store"); 
        response.setHeader("Pragma","no-cache");
        response.setContentType("text/xml");

        String query="select * from table'";

        OracleDataSource ods = new OracleDataSource();

        Connection conn = ods.getConnection();
        Statement statement = conn.createStatement();

        ResultSet rs = statement.executeQuery(query);
        sos.println("<dataset>");
        while(rs.next()) {
            sos.println("<record>");
                sos.println("<sso>"+ rs.getString("person_num_sso") +"</sso>");
                sos.println("<fname>"+ rs.getString("first_name") +"</fname>");
                sos.println("<lname>"+ rs.getString("last_name") +"</lname>");
                sos.println("<msso>"+ rs.getString("manager_person_num") +"</msso>");
                sos.println("<email_address>"+ rs.getString("email_address") +"</email_address>");
                sos.println("<person_status>"+ rs.getString("person_status") +"</person_status>");
            sos.println("</record>");
        }
        sos.println("</dataset>");
        rs.close();
        conn.close();           
        sos.close();
        System.out.print("Done list servlet");
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } catch (SQLException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } 
}

Answer 1

While I can't say for sure without seeing your server-side code, my guess is that the grid isn't updating because each request for the next page is returning the same data as the first. Your server-side code is responsible for transforming the "pages" of data, typically by sending limit/start/page to whatever is querying your data. The first place to start, though, is to look in Chrome Developer tools or Firebug to ensure that you're getting the data you expect per page. If it's the same data per page, you know you have an issue with the server-side code.

The important thing to remember, however, is that Ext JS is not ultimately responsible for paging your data. All that the "paging" toolbar does is send parameters in the AJAX request that instruct the server how it should transform the requested data...and even this request is ultimately based on information that the server has already provided back (e.g., the total dataset size). In this regard, Ext JS's relationship to the server is that of a "hand-shake": Ext JS requests data and assumes that the server is going to give it back in the format it asked for. If the server does not comply with this request, Ext JS has no way of knowing that (since it doesn't know about your data on the server), and will merely render whatever data it is given back in the response.

This is what I assume is happening in your case: the server returns the same records for each page. Since Ext JS has no way of differentiating between the two, it continues on its merry way, paging the data based on the total dataset that your server says exists. In this way, then, your grid IS refreshing correctly; it just appears to be an error since the data that's refreshed doesn't change.

Answer 2

It is indeed a change in your server side code what you are lacking. Instead of select * from table you should limit your query with the parameters start and limit in other words you should only return the set of reccords the grid page is expecting .... and not all reccords

*start and limit are parameters sent by the store by default, catch them on your servlet

Best regards @code4jhon