Hello everyone,
I am facing some hard time to implement server side pagination with DWR. I'm fairly new in Ext JS, so may be I'm missing something here.

We have a grid along with a date filter, changing the date will refresh the grid data and show records with pagination. We are using DWR here. Here is the screenshot of what I'm trying to do:

grid.JPG


You can see that the records are present because in that implementation there is no server side pagination and it displays all results from the server. Its working fine. But I started facing problems when I wanted to convert it to server-side pagination.

I'm using DWR proxy from this site: http://extjstricks.wordpress.com/201...s-4-proxy-dwr/

Here is the DWR method:

Code:
@Override
public WfeAgentCountsPageListVo getComplianceReportByPage(final GridPagedRequest storeObj, final Date date) {
        final WfeAgentCountsPageListVo pageList = new WfeAgentCountsPageListVo();
        List<WfeAgentCountsVo> reportVos = wfeReportingManager.getAgentCountsByPage(storeObj.getStart(), storeObj.getLimit(), date);
        int size = wfeReportingManager.getAgentCountsSize(date);
        pageList.setList(reportVos);
        pageList.setCount(size);
        return pageList;
    }


Here is the object which is being returned from the above method:

Code:
public class WfeAgentCountsPageListVo {


    int count;
    List<WfeAgentCountsVo> list = new ArrayList<WfeAgentCountsVo>();


    public WfeAgentCountsPageListVo() {
    }
    public WfeAgentCountsPageListVo(final int count, final List<WfeAgentCountsVo> list) {
        super();
        this.count = count;
        this.list = list;
    }


    public int getCount() {
        return count;
    }
    public void setCount(final int count) {
        this.count = count;
    }
    public List<WfeAgentCountsVo> getList() {
        return list;
    }
    public void setList(final List<WfeAgentCountsVo> list) {
        this.list = list;
    }
    @Override
    public String toString() {
        return "WfeAgentCountsPageListVo [count=" + count + ", list=" + list + "]";
    }
}

And this is the JS which is currently working (No pagination, displays all records from the response):

Code:
/*

*/
Ext.define('Ext.app.GridPortlet', {


    extend: 'Ext.grid.Panel',
    alias: 'widget.gridportlet',
    height: 300,
    
    
    myDateField: Ext.create('Ext.form.DateField', {
        fieldLabel: 'Select Date',
        name: 'reportDate',
        id: 'reportDate',
        labelWidth: 75,
        value: new Date()
    }),
    
    reportStore : new Ext.data.Store({
        fields: [
           {name: 'agentName'},
           {name: 'touchedCases'},
           {name: 'touchedRatio'},
           {name: 'completedCases'},
           {name: 'completedRatio'},
           {name: 'compliantCases'},
           {name: 'compliantRatio'},
           {name: 'totalCases'},
           {name: 'totalTouchedFlowTime'},
           {name: 'totalCompletedFlowTime'},
           {name: 'totalCompliantFlowTime'}
       ]
    }),
    
    reportResponse: function(pageList){
        if (pageList && pageList.data){
            this.reportStore.loadData(pageList.data,false);
        }
    },
    
    reportResponseException: function(err,msg){
        alert(msg);
    },
    
    loadGenInitiate: function(){
        WfeReportingDwrManager.getComplianceReport(Ext.getCmp('reportDate').value,{            
                callback: Ext.Function.bind(this.reportResponse,this),
                exceptionHandler: Ext.Function.bind(this.reportResponseException,this)
            });
    },
    
    initComponent: function(){
        console.log("initializing gridportlet");


        this.loadGenInitiate();


        Ext.apply(this, {
            height: this.height,
            store: this.reportStore,
            stripeRows: true,
            columnLines: true,
            columns: [
            {
                text   : 'Agent Name',
                dataIndex: 'agentName'
            },{
                text   : 'Touched Cases',
                dataIndex: 'touchedCases'
            },
            {
                text   : '% Touched',
                dataIndex: 'touchedRatio'
            },
            {
                text : 'Completed Cases',
                dataIndex: 'completedCases'                
            },
            {
                text   : '% Completed',
                dataIndex: 'completedRatio'
            },
            {
                text   : 'Compliant Cases',
                dataIndex: 'compliantCases'
            },
            {
                text   : '% Compliant',
                dataIndex: 'compliantRatio'
            },
            {
                text   : 'Total Cases',
                dataIndex: 'totalCases'
            },
            {
                text   : 'TFT - Touched',
                dataIndex: 'totalTouchedFlowTime'
            },
            {
                text   : 'TFT - Completed',
                dataIndex: 'totalCompletedFlowTime'
            },
            {
                text   : 'TFT - Compliant',
                dataIndex: 'totalCompliantFlowTime'
            }],
            tbar: Ext.create('Ext.form.Panel', {
                bodyPadding: '5 0 0 5',
                renderTo: Ext.getBody(),
                bodyStyle: {'background-color': '#d3e1f1'},
                items: {
                    xtype: 'datefield',
                    fieldLabel: 'Select Date',
                    name: 'reportDate',
                    id: 'reportDate',
                    labelWidth: 75,
                    listeners: {
                        'select': Ext.Function.bind(this.loadGenInitiate, this)
                    },
                    value: new Date()
                }
            })
        });
        this.callParent(arguments);
    }
});

This is the new JS(modified from the above version) which I used to make it server-side paginated:

Code:
/*




*/
Ext.define('Ext.app.GridPortletPagination', {


    extend: 'Ext.grid.Panel',
    alias: 'widget.gridportlet',
    requires: [
               'Ext.ux.DwrProxy'
    ],
           
    height: 300,
    
    
    myDateField: Ext.create('Ext.form.DateField', {
        fieldLabel: 'Select Date',
        name: 'reportDate',
        id: 'reportDate',
        labelWidth: 75,
        value: new Date()
    }),
    
    reportStore : new Ext.data.Store({
        fields: [
           {name: 'agentName'},
           {name: 'touchedCases'},
           {name: 'touchedRatio'},
           {name: 'completedCases'},
           {name: 'completedRatio'},
           {name: 'compliantCases'},
           {name: 'compliantRatio'},
           {name: 'totalCases'},
           {name: 'totalTouchedFlowTime'},
           {name: 'totalCompletedFlowTime'},
           {name: 'totalCompliantFlowTime'}
       ],
       idProperty : 'reportGrid',
       pageSize: 5,
       //baseParams:{start:0,limit:5},
       proxy: {
           type: "dwr",
           dwrFunction: WfeReportingDwrManager.getComplianceReportByPage,
           dwrParams: [Ext.getCmp('reportDate').value],
           reader: {
               root : 'list',
               totalProperty: 'count'
           }
       },
       autoLoad: true
    }),
    
    /*reportResponse: function(pageList){
        if (pageList && pageList.data){
            this.reportStore.loadData(pageList.data,false);
        }
    },
    
    reportResponseException: function(err,msg){
        alert(msg);
    },
    
    loadGenInitiate: function(){
        WfeReportingDwrManager.getComplianceReportPage(0,5, Ext.getCmp('reportDate').value,{            
                callback: Ext.Function.bind(this.reportResponse,this),
                exceptionHandler: Ext.Function.bind(this.reportResponseException,this)
            });
    },*/
    
    initComponent: function(){
        console.log("initializing gridportlet");


        //this.loadGenInitiate();


        Ext.apply(this, {
            height: this.height,
            store: this.reportStore,
            stripeRows: true,
            columnLines: true,
            columns: [
            {
                text   : 'Agent Name',
                dataIndex: 'agentName'
            },{
                text   : 'Touched Cases',
                dataIndex: 'touchedCases'
            },
            {
                text   : '% Touched',
                dataIndex: 'touchedRatio'
            },
            {
                text : 'Completed Cases',
                dataIndex: 'completedCases'                
            },
            {
                text   : '% Completed',
                dataIndex: 'completedRatio'
            },
            {
                text   : 'Compliant Cases',
                dataIndex: 'compliantCases'
            },
            {
                text   : '% Compliant',
                dataIndex: 'compliantRatio'
            },
            {
                text   : 'Total Cases',
                dataIndex: 'totalCases'
            },
            {
                text   : 'TFT - Touched',
                dataIndex: 'totalTouchedFlowTime'
            },
            {
                text   : 'TFT - Completed',
                dataIndex: 'totalCompletedFlowTime'
            },
            {
                text   : 'TFT - Compliant',
                dataIndex: 'totalCompliantFlowTime'
            }],
            tbar: Ext.create('Ext.form.Panel', {
                bodyPadding: '5 0 0 5',
                renderTo: Ext.getBody(),
                bodyStyle: {'background-color': '#d3e1f1'},
                items: {
                    xtype: 'datefield',
                    fieldLabel: 'Select Date',
                    name: 'reportDate',
                    id: 'reportDate',
                    labelWidth: 75,
                    listeners: {
                        'select': Ext.Function.bind(this.loadGenInitiate, this)
                    },
                    value: new Date()
                }
            }),
            /*dockedItems: [{
                xtype: 'pagingtoolbar',
                store: this.reportStore,   // same store GridPanel is using
                dock: 'bottom',
                displayInfo: true
            }],
            renderTo: Ext.getBody()*/
            bbar: Ext.create('Ext.PagingToolbar', {
                store: this.reportStore,
                displayInfo: true,
                displayMsg: 'Displaying cases {0} - {1} of {2}',
                emptyMsg: "No cases to display",                
            })
        });
        //this.callParent(arguments);
        this.reportStore.loadPage(1);
    }
});

What I'm missing here? I have already tried several alternatives which I found in other threads but none seems to be working. Any information and help will be highly appreciated. Thanks in advance.