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.
line 39082:
this.requests.5.options.params = "{}"
(5) being the current object
line 47668:
operation.start = 2
operation.limit = 30
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;
}
});
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.