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

[Boing]

I tried placing the override in various places of the html page, of the scripts, etc. Where would you recommend that I place the Ext.override blip? Thanks!

[Condor]

It's an override of existing Ext code, so you should include it directly after ext-all.js.

[george4rotech]

The isFiltered method seems misimplemented in a couple of ways. First it's currently implemented as follows:

return this.snapshot && this.snapshot != (this.allData || this.data);

But I think the following is what was actually intended:

return this.snapshot && this.snapshot != this.allData && this.snapshot != this.data;

But even the above simple fix to the apparent logic error does not "work" (for me, it always returns true), because the references will not necessarily be equal, although the underlying data is, due to how applyPaging is implemented. applyPaging does not assign/copy references, but rather it creates a new MixedCollection and then sets items/keys on it.

Here's some code I wrote, that gives me the boolean value I would expect from the isFiltered() method; the code is from the datachanged listener on a store, but where the scope is the grid. The key idea being, however, that to compare objects, or in this case the useful "keys" array, I first represent the array as a string.

Hope this helps.

    if (this.store.snapshot) {
                //work around mis-implementation of PagingStore's isFiltered() method:
                var commaDelimitedSnapshotKeys = this.store.snapshot.keys.join(',');
                if (commaDelimitedSnapshotKeys != this.store.allData.keys.join(',')
                    && commaDelimitedSnapshotKeys != this.store.data.keys.join(',')) {
                    //etcetera

[mvassau]

I was struggling with the same thing as Boing and in looking at the 3.2.1 source (line 48002) the override should use doRefresh not refresh:

Ext.override(Ext.PagingToolbar, {
    doRefresh: function () {
        delete this.store.lastParams;
        this.doLoad(this.cursor);
    }
});

Thought I'd pass this along for others having the same issue.

BTW, Thanks Condor for the awesome UX.

[PranKe01]

Maybe all the fixed should be implemented in the code of the first post

[chakrics]

Thanks for cool widget, works great for me . BTW I did use doRefresh as refresh doesn't work.

[george4rotech]

Let me preface this by repeating, I too am thankful for this component. Please consider my grid/x-type definition below. I've included it in its entirety, including a couple of plug-ins, which are beside the point, but nevertheless demonstrate how well this component plays with other extensions/plug-ins, which was the thing that impressed me to begin with! To duplicate the issue without the plug ins though some of that code may need to be removed.

Ok, my issue is that, when trying to do local sorting, I'm getting the following error:

this.fields.get(f) is undefined
http://localhost:9080/app/scripts/PagingStore.js
Line 183

"f" I believe should hold the field name, but when using Firebug, this is undefined for some reason. Thanks in advance for any and all guidance in solving this issue. Note that the data initialized below as [] is being populated through a call to loadData in the "refOwner" component. Let me know if this is not clear or if I can provide a screenshot to help demonstrate.

Client.app.management.useraccess.LocationGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent : function() {
        this.store = new Ext.ux.data.PagingStore({
            autoDestroy : true,
            reader : new Ext.data.ArrayReader({}, [{
                name : 'locId', mapping: 'locId'
                }, {
                name : 'locName', mapping: 'locName'
                }, {
                name : 'locCity', mapping: 'locCity'
                }, {
                name : 'locState', mapping: 'locState'
                }, {
                name : 'hasAccess', mapping: 'hasAccess'
            }]),
            data : [],
            lastOptions: {params: {start: 0, limit: 25}},
            remoteSort: false
        });
        
        var checkColumn =  new Ext.grid.CheckColumn({
            header: 'Access Granted',
            sortable: true,
            resizable: false,
            width: 100,
            dataIndex: 'hasAccess',
            align: 'center',
            fixed: true
        });
        
        this.columns = [{
            xtype: 'gridcolumn',
            header: 'Client Location Number',
            sortable: true,
            resizable: true,
            width: 175,
            dataIndex: 'locId',
            align: 'left'
        }, {
           xtype: 'gridcolumn',
           header: 'Client Location Name',
           sortable: true,
           resizable: true,
           width: 175,
           dataIndex: 'locName',
           align: 'left'
        }, {
           xtype: 'gridcolumn',
           header: 'Client Location City',
           sortable: true,
           resizable: true,
           width: 175,
           dataIndex: 'locCity',
           align: 'left'
        }, {
           xtype: 'gridcolumn',
           header: 'Client Location State',
           sortable: true,
           resizable: true,
           width: 175,
           dataIndex: 'locState',
           align: 'left'
        }, 
        checkColumn
        ]
        
        this.filters = new Ext.grid.GridFilters({ 
            local: true
            ,filters: [
                {type: 'numeric', dataIndex: 'locId'}
                ,{type: 'string', dataIndex: 'locName'}
                ,{type: 'string', dataIndex: 'locCity'}
                ,{type: 'string', dataIndex: 'locState'}
            ]
        });
                
        this.plugins = [checkColumn, this.filters];
                        
        this.bbar = new PagingToolbar({
            store: this.store
            ,displayInfo: true
            ,displayMsg: 'Displaying locations {0} - {1} of {2}'
            ,emptyMsg: "No locations to display"
        });
                        
        this.tbar =  {
            xtype: 'toolbar',
            items: [{
                xtype: 'button',
                text: 'Save User Access',
                listeners: {'click': function() {this.refOwner.onSaveUserClick();}, scope: this}
            }]
        };
                               
        Client.app.management.useraccess.LocationGrid.superclass.initComponent.call(this);
    }
});

Ext.reg("useraccesslocationgrid", Client.app.management.useraccess.LocationGrid);

[george4rotech]

Adding the following two lines to the top of PagingStore.js's "sortData" method fixed my issue. Could this be a compatability issue with ExtJS 3.2.1? Because I see that Ext.data.Store.applySort method on line 21976 of ext-3.2.1/ext-all-debug.js calls sortData with no arguments, but PagingStore's sortData expects two arguments

    sortData: function(f, direction) {
        f = this.sortInfo.field;
        direction = this.sortInfo.direction;
        //etcetera

[Condor]

I'll try working on an Ext 3.2.1 compatible PagingStore (including multi-field sort) this weekend

[george4rotech]

I'll try working on an Ext 3.2.1 compatible PagingStore (including multi-field sort) this weekend

Awesome thanks we will look forward to it!