Ext.ux.data.PagingStore [v0.5]

[northmh]

Hi, Condor. Thanks for providing this component -- I was a little floored when I realized Ext didn't provide (pre-4) client-side paging out of the box.

I'm using PagingStore v0.5 with ExtJS 3.3.2 (that version is supplied with the product we're using).

I have an issue with handling of DataProxy 'exception' events. Previously, when using JsonStore, I assigned an event handler to 'exception' events which just pulls the error message out of the server-side response and displays it in an Ext.MessageBox.alert(...).

Dropping PagingJsonStore into place breaks that functionality. I've confirmed this by reverting back to JsonStore and it works fine.

The issue is that it is actually executing my exception handler, but then some later code -- not mine -- is closing the dialog box before it is even visible (I know it isn't mine because I don't have any code anywhere that explicitly closes the box). I can see this by slowing down the execution using FireBug to step through the code. In that case, the dialog box opens, and stays open until I 'continue' the execution. It's as if there is some other exception handling being added after mine.

I haven't debugged it more deeply than that. Obviously I could step through the code further and eventually find the root cause... which I'll do if I have to, but was hoping you might have a ready insight that could save me the time. Also wanted to alert you to this 'bug' (in that it clearly violates the 'drop-in replacement for *Store' claim).

Here's a very abbreviated code segment. I'll send more detail if needed:

     var storeConfigObj = {
            proxy : new Ext.data.HttpProxy({
                method: Const.ajaxMethod, // GET
                url: Const.ajaxUrl,
                timeout: Const.ajaxHttpTimeout
            }),
            baseParams: {
                'OP': 'CTL_GET_RESULTS',
                'ctlConfigId': this.ctlConfigId//,
//                'start': 0,
//                'limit': Const.rowsPerPage
            },
            autoLoad: false,
            remoteSort: myobj.configObj['clientSideEnabled'] ? false : true,

            // ... other JsonStore configuration details

            listeners: {
                exception: function(proxy, type, action, options, response, arg) {
                    if (type == 'response') {
                        var jsonData = Ext.util.JSON.decode(response.responseText);
                        Ext.MessageBox.alert('ERROR: '+jsonData.errorCode,
                             jsonData.errorMsg);
                    }
                },
                // beforeload and load listeners
            }
        };


   // use PagingJsonStore if configured for client-side
    if (this.configObj['clientSideEnabled']) {
        // 'exception' event handling DOESN'T WORK
        this.gridStore = new Ext.ux.data.PagingJsonStore(storeConfigObj);
    } else {
        // 'exception' event handling WORKS
        storeConfigObj.baseParams.start = 0;
        storeConfigObj.baseParams.limit = Const.rowsPerPage;
        this.gridStore = new Ext.data.JsonStore(storeConfigObj);
    }

    // assign created store to GridPanel

You can see that the code is identical for the JsonStore and PagingJsonStore cases. Code selects between the two depending upon whether the 'clientSideEnabled' application config attribute is true or false. They both use the same exact Store configuration object, so there is no 'accidental' difference in the configuration between the two cases. The only other differences are that I add the 'start' and 'limit' params to baseParams in the JsonStore case, and set remoteSort to true in the JsonStore case and false in the PagingJsonStore case.

Thanks for any help you can provide.

[northmh]

Hi Condor,

....

In version 0.5 the START and LIMIT params are also being send to the server when retrieving records, version 0.41 did not have this behaviour.

Is this intentional and what is in your opinion the best way to prevent this without have to do 'server side' adjustments?

....

I had to 'fix' this same issue. Surprised Condor hasn't responded. I'm also surprised that this issue hasn't been reported more. I'm guessing that most people have a server side that doesn't honor the start/limit params, but in my case the solution was implemented with server-side paging and sorting first, and then retrofitted for client-side with the option to toggle between them in configuration. Technically we could have modified the server side to honor the 'client-side' configuration setting, causing it to ignore the start & limit params, but that really would be a hack for what is really a client-side issue.

I 'fixed' it by changing this in the 'execute' method of PagingStore:

            }
            // *** end ***
            this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
        }
        return doRequest;

To this:

            }
            // *** end ***
            delete options.params.start;
            delete options.params.limit;
            this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options);
        }
        return doRequest;

[northmh]

....

I have an issue with handling of DataProxy 'exception' events. Previously, when using JsonStore, I assigned an event handler to 'exception' events which just pulls the error message out of the server-side response and displays it in an Ext.MessageBox.alert(...).

Dropping PagingJsonStore into place breaks that functionality. I've confirmed this by reverting back to JsonStore and it works fine.

The issue is that it is actually executing my exception handler, but then some later code -- not mine -- is closing the dialog box before it is even visible (I know it isn't mine because I don't have any code anywhere that explicitly closes the box).

....

Nevermind... I had some other code executing in the client-side case which, coupled with some unexpected behavior from Ext, was causing this. I have a client-side filter control that, upon loading new data from the server side, must get re-applied after the load. To do this I added a callback to the store.load() to reapply the filter to the store and refresh the grid and paging toolbars (basically, PagingToolbar.doLoad(0)). But I wasn't checking the 'success' flag in the callback, so it was executing in the failure case, and something in the doLoad(0) call was causing Ext to disappear the error dialog box.

Changing this:

    this.gridStore.load({
        'params': params,
        'callback': function() {
            if (myobj.configObj['clientSideEnabled']) {
                myobj.clientSideFilter.doFilter();
            }
        }
    });

to this:

    this.gridStore.load({
        'params': params,
        'callback': function(r, options, success) {
            if (success && myobj.configObj['clientSideEnabled']) {
                myobj.clientSideFilter.doFilter();
            }
        }
    });

Fixed it.

(yeah, that's what I get for taking shortcuts and not checking result indicators)

[computeraholic]

Thank you, this solved my headache

There seems to be a problem when using Ext.ux.data.PagingStore with a Ext.ux.PagingToolbar when you never call the load function directly. I have a page where I only call the store's add method to add records. Initially when the page loads there are no records in the store, they are only added when the user presses a button.

In this case the current page number and the displayInfo are incorrect.

This is what I did to fix this problem:

Add a constructor for Ext.ux.data.PagingStore:

constructor: function(config) {
        this.totalLength = 0;
        Ext.ux.data.PagingStore.superclass.constructor.call(this, config);
},

At the beginning of the Ext.ux.PagingToolbar's onChange method:

Change:

if (this.cursor >= t) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}

To:

if (this.cursor >= t && this.cursor > 0) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}

[hieu79vn]

Hello

Does anyone have a complete code/runnable for a paging grid using this Ext.ux.data.PagingStore? Could you give me please?

Thank you

[palashkumar1010]

[aghextjs]

My attempt at an Ext JS 4 version of this extension at http://www.sencha.com/forum/showthre...d-for-Ext-JS-4