PDA

View Full Version : grid.store.onBeforeLoad looses sortInfo



tobiu
14 Dec 2009, 1:47 PM
hi together,

while working on a way to implement refreshing a store only if something has changed (see http://www.extjs.com/forum/showthread.php?p=418460 for details) i realised, that stores bound to a grid loose their sorting field and direction.



this.ds = new Ext.data.JsonStore({
url : 'ajaxHandler/ajaxHandler.php'
,totalProperty : 'totalCount'
,root : 'reservations'
,fields: [
{name: 'company'}
,...
]
,sortInfo : {field: 'created', direction: 'DESC'}
,remoteSort : true
,baseParams : {
hashValue : 0
,id : id
,mode : mode
,module : 'reservationGrid'
,showActive : 1
}
,listeners : {
load : function(store){
store.setBaseParam('hashValue', store.reader.jsonData.hashValue);
store.loading = false;
console.log(store.getSortState());
console.log('loaded');
}
,beforeload : function(store, opt){
console.log(opt.params.sort);
console.log(opt.params.dir);

if(store.loading !== true){
store.loading = true;

store.load(opt);
return false;
}
return true;
}
}
});


in this case the first call of beforeload HAS the right values for the new sort. then i call store.load(opt); return false; (i may not return true here, see posting above for reason), which cancels the following load event but again starts the chain that leads to the beforeload-event with the right values. then it finally returns true, but this time, the sortInfo field and direction use the default sorting.

if you think, this is a bug, feel free to move this topic.

i tried several workarounds (for several hours), since i was not able to find the spot, where things get lost. my last attempt was:



beforeload : function(store, opt){
console.log(opt.params.sort);
console.log(opt.params.dir);

if(store.loading !== true){
store.loading = true;
if(opt && opt.params && opt.params.sort){
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
opt.params = opt.params || {};
opt.params[pn.sort] = this.sortInfo.field;
opt.params[pn.dir] = this.sortInfo.direction;
}
console.log(store.getSortState());
if(opt.params.dir){
store.sort(opt.params.sort, opt.params.dir);
} else {
store.sort(opt.params.sort);
}
} else {
store.load(opt);
}
return false;
}
return true;
}


which only looses the direction (always sets to ASC). but both versions loose the visual effect of the gridView, showing the sorted column and direction there too.

i played around with grid.getView().updateHeaderSortState() without success (since the new sort state gets lost) and took a closer look at the Store.load-method:



load : function(options) {
options = options || {};
this.storeOptions(options); // why setting it here and not after the next block?
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
options.params = options.params || {};
options.params[pn.sort] = this.sortInfo.field;
options.params[pn.dir] = this.sortInfo.direction;
}
try {
return this.execute('read', null, options); // <-- null represents rs. No rs for load actions.
} catch(e) {
this.handleException(e);
return false;
}



in the forums i only found this:
http://www.extjs.com/forum/showthread.php?t=70802

which describes the problem in another angle. i am quite sure though, that the solution of one will solve the other too ;)

any help would be nice, since i can not continue on the "refresh store only when something has changed"-algorithm (that i am willing to share), before this works.

kind regards,
tobiu

p.s.: i added a screen of the firebug-console. please take a closer look at


console.log(store.getSortState());
console.log('loaded');


called in the load-listener.

tobiu
14 Dec 2009, 3:28 PM
i found a first workaround, though this should not stay the final solution ;)



load : function(store){
store.loading = false;
store.allowLoading = false;
store.setBaseParam('hashValue', store.reader.jsonData.hashValue);
}
,beforeload : function(store, opt){
if(store.allowLoading === true){
return true;
}
if(store.loading !== true){
store.loading = true;

// first loading, default sorting
if(!store.baseParams.hashValue){
opt.params.getHashValue = false;
store.load(opt);
return false;
}

opt.params.getHashValue = true;
Ext.Ajax.request({
params : opt.params
,url : 'ajaxHandler/ajaxHandler.php'
,callback : function(moo, success, response){
if(response.responseText != 'data is up to date'){
store.allowLoading = true;
opt.params.getHashValue = false;

// workaround, because the sorting gets lost otherwise
if(opt && opt.params && opt.params.sort){
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
opt.params = opt.params || {};
opt.params[pn.sort] = this.sortInfo.field;
opt.params[pn.dir] = this.sortInfo.direction;
}
if(opt.params.dir){
store.sort(opt.params.sort, opt.params.dir);
} else {
store.sort(opt.params.sort);
}
} else {
store.load(opt);
}
} else {
new Ext.ux.Notification({title: 'validation', html: 'this view is up to date', iconCls: 'accept'}).show(document);
}
store.loading = false;
}
});
return false;
}
}