1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default grid.store.onBeforeLoad looses sortInfo

    grid.store.onBeforeLoad looses sortInfo


    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.

    Code:
        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:

    Code:
    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:

    Code:
    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
    Code:
    console.log(store.getSortState());
    console.log('loaded');
    called in the load-listener.
    Attached Images
    Last edited by tobiu; 14 Dec 2009 at 2:07 PM. Reason: added screen

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    i found a first workaround, though this should not stay the final solution

    Code:
            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;
                }
            }