extjspaginationtoolbar

ExtJS 4: Ext.grid.Panel Ext.PagingToolbar buttons (first, previous, next, last) not passing start and limit parameters


I'm having difficulty getting the paging toolbar to work. The initial load passes the "start" and "limit" parameter to the server proxy and the data loads fine in the grid. However, when clicking the "Next" button in the paging toolbar, the "start" and "limit" parameters don't get passed properly and the web method bombs out because it expects those parameters. If you can help me fix the root problem, that would be awesome. But if not, and you're able to help me override the buttons, that's also fine, so I can put in a temporary fix until I figure out what's wrong.

Exception:

POST http://{domain}/Controls/ObjectList/ObjectListService.asmx/GetObjectList?_dc=1348591244365 500 (Internal Server Error) ext-all-debug.js:36837
Ext.define.request                  ext-all-debug.js:36837
Ext.define.doRequest                ext-all-debug.js:49508
Ext.define.read                     ext-all-debug.js:39082
Ext.define.load                     ext-all-debug.js:47668
Base.implement.callParent           ext-all-debug.js:3728
Ext.define.load                     ext-all-debug.js:50160
Ext.define.read                     ext-all-debug.js:47399
Ext.define.loadPage                 ext-all-debug.js:50404
Ext.define.nextPage                 ext-all-debug.js:50409
Ext.define.moveNext                 ext-all-debug.js:102105
Ext.define.fireHandler              ext-all-debug.js:79530
Ext.define.onClick                  ext-all-debug.js:79520
(anonymous function)
Ext.apply.createListenerWrap.wrap   ext-all-debug.js:9171

{"Message":"Invalid web service call, missing value for parameter: \u0027query\u0027.","StackTrace":"   at System.Web.Script.Services.WebServiceMethodData.CallMethod(Object target, IDictionary`2 parameters)\r\n   at System.Web.Script.Services.WebServiceMethodData.CallMethodFromRawParams(Object target, IDictionary`2 parameters)\r\n   at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n   at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

===========================

Source Code:

    var itemsPerPage = 30;

    var store = new Ext.data.Store({
        proxy: new Ext.ux.AspWebAjaxProxy({
            url: '/Controls/ObjectList/ObjectListService.asmx/GetObjectList',
            actionMethods: {
                create: 'POST',
                destroy: 'DELETE',
                read: 'POST',
                update: 'POST'
            },
            reader: {
                type: 'json',
                model: 'Object',
                totalProperty: 'd.recordCount',
                //idProperty: 'object_id',
                root: 'd.resultSet'
            },
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            }
        }),
        pageSize: itemsPerPage,
        noCache: false,
        //autoLoad: true
        autoLoad: {
            params: {
                //query: '',
                start: 0,
                limit: itemsPerPage
            }
        }
    });    

...

    Ext.define('ObjectGrid', {
        extend: 'Ext.grid.Panel',

        initComponent: function () {
            var me = this;

            Ext.applyIf(me, {
                store: store,
                forceFit: true,
                autoScroll: true,
                height: 750,
                loadMask: true,

                columns: [
                ],

... 

                bbar: Ext.create('Ext.PagingToolbar', {
                    store: store,
                    displayInfo: true,
                    pageSize: 30,
                    displayMsg: 'Displaying records {0} - {1} of {2}',
                    emptyMsg: 'No records to display'

//                    type: 'pagingmemory',

//                    listeners: {
//                        afterrender: {
//                            single: true,
//                            fn: function (thispaging) {
//                                thispaging.first.on('click', function () {
//                                    Ext.Msg.alert('first', 'first');
//                                });
//                                thispaging.prev.on('click', function () {
//                                    Ext.Msg.alert('prev', 'prev');
//                                });
//                                thispaging.next.on('click', function () {
//                                    Ext.Msg.alert('next', 'next');
//                                });
//                                thispaging.last.on('click', function () {
//                                    Ext.Msg.alert('last', 'last');
//                                });
//                            }
//                        }
//                    }


//                    listeners: {
//                        'click' : function(which) { 
//                            alert('you have clicked'); 
//                        } 
//                    } 

                })  // bbar

            });

            me.callParent(arguments);
        }
    });

update #1:

The parameters are being lost between these two calls in the stack trace mentioned above.

enter image description here

line 39082:

this.requests.5.options.params = "{}"
(5) being the current object

enter image description here

line 47668:

operation.start = 2
operation.limit = 30

enter image description here

update #2:

Ext.define('Ext.ux.AspWebAjaxProxy', {
    extend: 'Ext.data.proxy.Ajax',
    require: 'Ext.data',
    //processData: false,

    buildRequest: function (operation) {
        var params = Ext.applyIf(operation.params || {}, this.extraParams || {}),
                                request;
        params = Ext.applyIf(params, this.getParams(params, operation));
        if (operation.id && !params.id) {
            params.id = operation.id;
        }

        params = Ext.JSON.encode(params);

        request = Ext.create('Ext.data.Request', {
            params: params,
            action: operation.action,
            records: operation.records,
            operation: operation,
            url: operation.url
        });
        request.url = this.buildUrl(request);
        operation.request = request;
        return request;
    }
});

Solution

  • Well I guess the trick lies within

    // Clone params right now so that they can be mutated at any point further down the call stack
    var me = this,
        params = operation.params = Ext.apply({}, operation.params, me.extraParams),
        request;
    

    I think you can use this to replace your first lines, I guess it should work then.

    Please look also at

    // Set up the entity id parameter according to the configured name.
    // This defaults to "id". But TreeStore has a "nodeParam" configuration which
    // specifies the id parameter name of the node being loaded.
    if (operation.id !== undefined && params[me.idParam] === undefined) {
        params[me.idParam] = operation.id;
    }
    

    dunno if you need to update this too.