Extjs Grid paging with Ajax call not working

Question

I am able to retrieve all the records from the database using servlet but unable to perform paging on the same. All the records are displayed on the grid with the paging tool bar showing as 1 of 5 of 54 records but actually it is displaying all the records in the first page, second page and so on....

I did some research and some users have mentioned about using start and limit parameters on server side and I didn't find the clue/example on the same on any website till now. If there is no alternative and only way to fix this to alter the server side code with start and limit parameters then please provide me a sample code on java servlet.

One more thing to talk about this is there are no start and limit parameters in oracle 11g (disregard 12c) so how do I fix this?

Ext.onReady(function ()
{
var itemsPerPage =5;
var store = Ext.create('Ext.data.Store',{
   storeId: 'resultsetstore',
   autoload: false,
   pageSize:itemsPerPage,
   fields:
           [
                {name: 'firstname', id:'firstname'},
                {name: 'email', id:'email'},
                {name: 'mobileno', id:'mobileno'}
           ],
           proxy:
                   {
                       type:'ajax',
                       enablePaging: true,
                       url:'./RetrieveRecords'
                   },
                   reader:{type:'json',totalProperty: 'total'}
});
store.load();


Ext.create('Ext.grid.Panel',{
    store:store,
    layout: 'border',
    height:300,
    renderTo: Ext.getBody(),
    columns:
            [
                    {
                        header: 'Email',
                        id: 'email',
                        dataIndex: 'email',
                        //autoSizeColumn : true,
                        flex: 1,
                        editor: {
                            xtype: 'textarea'
                        }
                    },
                    {
                        header: 'Action',
                        id: 'action',
                        align: 'center',
                        xtype: 'actioncolumn',
                        autoSizeColumn: true,
                        //flex: 1, 
                        sortable: false,
                        items:
                                [
                                    {
                                        icon: 'images/icons/cancel.png',
                                        tooltip: 'Delete',
                                        handler: function (grid, rowIndex, colIndex)
                                        {
                                            var rec = grid.getStore().getAt(rowIndex);
                                            var email = rec.get('email');
                                            Ext.Ajax.request(
                                                    {
                                                        url: './deleteRecords',
                                                        params: {email: email},
                                                        method: 'GET',
                                                        success: function (response)
                                                        {
                                                            Ext.Msg.alert("successfully deleted" + " " + response.status);
                                                            window.location.reload();
                                                        },
                                                        failure: function (response)
                                                        {
                                                            Ext.Msg.alert("failed" + response.status);
                                                        }
                                                    });
                                        }
                                    }
                                ]
                            }
                        ],
                dockedItems:
                        [
                            {
                                xtype: 'pagingtoolbar',
                                store: store,
                                dock: 'bottom',
                                displayInfo: true
                            }
                        ]
                    });
});

Here is my serverside code(java servlet):

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, Exception 
    {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        JSONArray jarray = new JSONArray();
        try
        {
            Connection con = DBConnection.getConnection();
            Statement st = con.createStatement();
            String query = "select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION";
            ResultSet rs = st.executeQuery(query);

            while(rs.next())
            {
                JSONObject json = new JSONObject();
                json.put("email",rs.getString("email"));
                json.put("mobileno", rs.getString("mobileno"));
                json.put("firstname", rs.getString("firstname"));
                jarray.add(json);
            }
            out.println(jarray);
            System.out.println(jarray);
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
    }

Surya Prakash Tumma Surya Prakash Tumma · Accepted Answer · 2014-12-23T11:22:44

Oracle has start and limit but it was given in different names rownum and limit by

I am modifying your query.. assume You are getting start and limit from ext js to your servelt

  select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION where rownum>=start and limit by limit(value from ext js)

suppose if you got start =3 and limit is 10

 select EMAIL,MOBILENO,FIRSTNAME from UP_CLOUD_REGISTRATION where rownum>=3 and limit by 10

Extjs Grid paging with Ajax call not working

1 Answers