Missing sortInfo by browsing with PagingToolbar

[SunnySven]

Hello,

I have a problem with my PagingToolbar when browsing a remote store.

I have a base grid (preconfigured) from which all other grids inherit from.

Here first my base grid


App.Grid.Base = Ext.extend(Ext.grid.GridPanel, {
region: 'center',
loadMask: true,
stripRows: true,
iconCls: 'icon-grid',
limit: 1,
viewConfig: {
forceFit: true
},
initComponent: function()
{
// apply config
this.store = new Ext.data.Store
({
proxy: new Ext.ux.data.JsonRpcProxy({method: this.method}),
storeId: 'test-id',
remoteSort: true,

/*
* JsonRpcReader liest "metaData" im Result-Objekt und es muss
* nicht wie beim originalen JsonReader auf root-Ebene liegen
*/
reader: new Ext.ux.data.JsonRpcReader({metaDataProperty: 'result.metaData'}),
sortInfo: this.sortInfo,
autoLoad: {
params: {
start: 0,
limit: this.limit
}
}
});

this.store.proxy.on('beforeload', function(proxy, params, options){
delete params.xaction;
});

this.bbar = new Ext.PagingToolbar({
store: this.store,
pageSize: this.limit,
displayInfo: true
});

// call parent
App.Grid.Base.superclass.initComponent.apply(this, arguments);
}
});
And my user grid will inherit form base grid, look at this:


App.Grid.Benutzer = Ext.extend(App.Grid.Base,
{
initComponent: function()
{
var selectionModel = new Ext.grid.CheckboxSelectionModel();

config =
{
method: 'Admin_Rpc_Benutzer.getList',
sortInfo: {
field: 'benutzername',
direction: 'ASC'
},
sm: selectionModel,
cm: new Ext.grid.ColumnModel([
selectionModel,
{dataIndex: 'id', header: 'Id', sortable: true},
{dataIndex: 'benutzername', header: 'Benutzername', sortable: true},
{dataIndex: 'm.name', header: 'Mandant', sortable: true},
{dataIndex: 'm.erstellt', header: 'Erstellt', sortable: true, xtype: 'datecolumn', format: 'd.m.Y'}
])
};

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
App.Grid.Benutzer.superclass.initComponent.apply(this, arguments);
}
});
Her I add the user grid to a tabpanel:


...
tab = this.tabPanel.add(new App.Grid.Benutzer(options));
...
First the stores loads correctly and I send these params to my json-server:

{"id":"ext-gen1","method":"Admin_Rpc_Benutzer.getList","params":[0,1,"benutzername","ASC"]}When I will go to next page by PagingToolbar, only thes params will be send to my json-server:

{"id":"ext-gen1","method":"Admin_Rpc_Benutzer.getList","params":[1,1]}I miss my sortInfo (benutzernamer, ASC)... where is it?

Here are my exported php functions


var Admin_Rpc = function(callback) {
this.dispatcher = new Ms.JsonRpcClient(callback);
};
var Admin_Rpc_Benutzer = function(callback) {
this.dispatcher = new Ms.JsonRpcClient(callback);
};
Admin_Rpc_Benutzer.prototype.getList = function() {
return this.dispatcher.doCall('Admin_Rpc_Benutzer.getList', arguments);
};
Here is my JsonRpcClient:


var Ms =
{
JsonRpcClient: function(clientObj, serviceURL)
{
this.reqRespMapping = [];
this.serviceURL = '/webservices/admin/rpc-server.php';

// Eindeutige ID generieren
this._createId = function() {
return Math.floor(Math.random() * 100);
};

this.callback = function(options, success, response)
{
var response = Ext.decode(response.responseText);
var params = this.reqRespMapping[response.id]

if (params)
{
if (clientObj.length == 1) {
clientObj.call(null, response.id, response);
}
else {
if (response.error) {
var responseError = response.error ? response.error.message : null;
clientObj[params.method + "_failure"].call(null, response.id, response.error.message);
}
else {
clientObj[params.method + "_callback"].call(null, response.id, response.result);
}
}

this.reqRespMapping.remove(response.id);
}
};

this._ajaxRequest = function(params)
{
this._request = Ext.Ajax.request
({
scope: this,
url: this.serviceURL,
callback: this.callback,
jsonData: params
});
};

this.doCall = function(classAndMethod, args)
{
Ms.firebug.log(classAndMethod);
var id = this._createId();

// args ist ein Objekt und kein Array, daher ist eine Umwandlung nötig
for (var i = 0, arr=[]; i < args.length; i++) {
arr[i] = args[i];
}

var jsonRpcReq = {
id: id,
method: classAndMethod,
params: arr
};

this._ajaxRequest(jsonRpcReq);
this.reqRespMapping[id] = jsonRpcReq;

return id;
}
}
};
Here is my Proxy class Ext.ux.data.JsonRpcProxy:


Ext.namespace("Ext.ux.data");

Ext.ux.data.JsonRpcProxy = Ext.extend(Ext.data.DataProxy,
{
initComponent: function() {
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.data.JsonRpcProxy.superclass.initComponent.apply(this, arguments);
},
load: function(params, reader, callback, scope, args)
{
// SORTINFO IS HERE MISSING (benutzername, ASC)

this.reader = reader || this.reader;
this.callback = callback || this.callback;
this.scope = scope || this.scope;
this.args = args || this.args;

if (this.fireEvent("beforeload", this, params) !== false)
{
var params = Ext.apply(params, this.additionalParams);

var rpcFilters = null;
var rpcParams = [];

if (params.filters) {
rpcFilters = params.filters;
delete params['filters'];
}

// Objekt in Array umwandeln
for (var property in params) {
rpcParams.push(params[property]);
}

if (rpcFilters) {
rpcParams.push(rpcFilters);
}

var jsonRpcReq = {
id: id,
method: this.method,
params: rpcParams,
callback: callback
};

var o = {
url: '/webservices/admin/rpc-server.php',
callback: this.loadResponse,
jsonData: jsonRpcReq,
reader: reader,
scope: this
};

if (this.activeRequest) {
Ext.Ajax.abort(this.activeRequest);
}
this.activeRequest = Ext.Ajax.request(o);
}
else { // the beforeload event was vetoed
callback.call(scope || this, null, arg, false);
}
},

loadResponse: function(o, success, response)
{
delete this.activeRequest;

try {
this.callback.call(this.scope, this.reader.read(response), this.args, true);
}
catch(e) {
Ms.firebug.error(e);
this.fireEvent("loadexception", this, o, response, e);
}
}
});
I debugged my code with firebug, but I only recognized, that I am still missing in the load function from my proxy class the sortinfo (benutzername, asc)..

Is it because I am extending two times?
Can anyone please help me?

Thank you.

Sven.

[SunnySven]

Can anyone please help me?

[SunnySven]

My last attempt ... Can anybody please help by my problem?

[umarkashmiri]

My last attempt ... Can anybody please help by my problem?

Hey,
After rendering grid load the store and send the sorting information. It can never happen that when u load the store with sorting info and then use paging......paging only reload the store with the different parameters........... but if u are still unable to solve the problem then send manually send the extra parameter with store load and catch them on to server side..... i m comprehending ur code and implementing at my side to see wts the problem..... till then u try to use extra parameter with store load. like grid.store.load(params:{start:0,limit:50:sodrtinfo: 'username ascending'}) till then i m debugging ur code

[umarkashmiri]

Look wt u have added with beforeload listener

[Condor]

Store.load() adds the sort and dir parameters if remoteSort:true and sortInfo is set.

Try debugging if these settings are still ok in Store.load().

[SunnySven]

I add a listener to my store

load: function(store, records, options) {
Ms.firebug.debug(store);
Ms.firebug.debug(records);
Ms.firebug.debug(options);
}

In options (before paging) there is an object params which has the attributes:


params Object
start=0 limit=1 sort=benutzername dir=ASC


After paging the options contains:


params Object
start=1 limit=1


Store object (before paging):


autoDestroy
false
autoLoad
Object params=Object
baseParams
Object
batchSave
false
data
Object items=[1] map=Object keys=[1] length=1 events=Object
events
Object datachanged=Object metachange=true add=Object
fields
Object items=[4] map=Object keys=[4] length=4 events=Object
lastOptions
Object params=Object
modified
[]
paramNames
Object start=start limit=limit sort=sort dir=dir
proxy
Object method=Admin_Rpc_Benutzer.getList api=Object
pruneModifiedRecords
false
reader
Object metaDataProperty=result.metaData meta=Object
remoteSort
true
removed
[]
sortInfo
undefined
sortToggle
Object benutzername=ASC
storeId
"store"
totalLength
2


Store object after paging:


autoDestroy
false
autoLoad
Object params=Object
baseParams
Object
batchSave
false
data
Object items=[1] map=Object keys=[1] length=1 events=Object
events
Object datachanged=Object metachange=true add=Object
fields
Object items=[4] map=Object keys=[4] length=4 events=Object
lastOptions
Object params=Object
modified
[]
paramNames
Object start=start limit=limit sort=sort dir=dir
proxy
Object method=Admin_Rpc_Benutzer.getList api=Object
pruneModifiedRecords
false
reader
Object metaDataProperty=result.metaData meta=Object
remoteSort
true
removed
[]
sortInfo
undefined
sortToggle
Object benutzername=ASC
storeId
"store"
totalLength
2


Hope this helps...

[Condor]

I was more interested in the output from:

var store = new Ext.data.Store({
...
load : function(options) {
console.dir(options);
this.constructor.prototype.load.apply(this, arguments);
console.dir(options);
}
});

[SunnySven]

hope attachment helps @condor

second post is from paging.

[Condor]

I need more info:

var store = new Ext.data.Store({
...
load : function(options) {
console.dir(options.params, this.sortInfo, this.remoteSort);
this.constructor.prototype.load.apply(this, arguments);
console.dir(options.params, this.sortInfo, this.remoteSort);
}
});

[SunnySven]

you got it...

[gurufaction]

Use the beforechange event to load you default sort. Everything should work fine after this.



pagingBar.on('beforechange',function(p,params){
params["sort"] = "delivered";
params["dir"] = "DESC";
});

[Condor]

I don't see the info for sortInfo and remoteSort in your screenshot.

ps. Does your data contain metadata? In older Ext versions metadata would overwrite the current sortInfo (even if the metadata doesn't contain sortInfo).

The fix for that was:

Ext.override(Ext.data.Store, {
onMetaChange : function(meta, rtype, o){
this.recordType = rtype;
this.fields = rtype.prototype.fields;
delete this.snapshot;
if(meta.sortInfo){
this.sortInfo = meta.sortInfo;
}else if(this.sortInfo && !this.fields.get(this.sortInfo.field)){
delete this.sortInfo;
}
this.modified = [];
this.fireEvent('metachange', this, this.reader.meta);
}
});

[SunnySven]

Yes, my data contains metadata...

I implemented the fix, but it does not work.
When will be released a new version of ext 3, where the "bug" is fixed...

[Condor]

How did you implement the fix?

ps. Instead of using the fix you could also modify your server to send sortInfo in the metadata.

[SunnySven]

yes, great, thank you sooo much!

my server is now sending sortinfo in the metadata :-)
everything works fine :-)