Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2013
    Location
    Austin, TX
    Posts
    4
    Vote Rating
    0
    tanzir is on a distinguished road

      0  

    Default DwrProxy + Server Side Pagination =((

    DwrProxy + Server Side Pagination =((


    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    What does your server side JSON look like? Are you sending the total record count back?

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Austin, TX
    Posts
    4
    Vote Rating
    0
    tanzir is on a distinguished road

      0  

    Default


    Hi Scott,
    Thanks a lot for your response. Yes, I'm sending the total record count back to client.

    Here is the screenshot:

    response.jpg

    From browser:

    dwr-response.jpg

    In the store, I am mentioning their names (list, count):

    Code:
       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
        }),

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I see a total of 3? You need to send the total of all records in table, not filtered count.
    So if the table has 50 records, and the first page has 10 records, then you need to send the count of 50, along with the first 5 records.

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Location
    Austin, TX
    Posts
    4
    Vote Rating
    0
    tanzir is on a distinguished road

      0  

    Default


    Good catch, thanks Scott for your time.

    I have fixed that problem and returning expected count.

    response-new.JPG

    But still getting the same error message:

    Code:
    Uncaught TypeError: Cannot call method 'setSize' of undefined ext-all-debug-w-comments.js:33289

    Any idea? Thanks again.