Buffered Ext.data.Store issues

[GregXII]

OK, for those having trouble getting this to work, here's my set-up. I've included stevil's fix too, for good measure.

Ext.onReady(function(){

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: ['id','name','balance'],
        idProperty: 'id'
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        pageSize: 60,
        buffered: true,
        remoteSort: true,
        purgePageCount: 5,
        proxy: {
            type: 'ajax',
            url: 'yourURLHere',
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
            },
            simpleSortMode: true
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        id: 'myGrid',
        store: store,
        verticalScroller: {
            xtype: 'paginggridscroller',
            activePrefetch: true // preload new set just before you reach the end
        },
        invalidateScrollerOnRefresh: false,
        columns: [
            {
                dataIndex: 'id',
                header: 'ID',
                width: 60,
                flex:6
            },{
                dataIndex: 'name',
                header: 'Name',
                width: 150,
                flex:15
            },{
                dataIndex: 'balance',
                header: 'Balance',
                format: '$0,000.00',
                width: 80,
                flex:8
            }
        ]
    });

    var vp = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [
            {
                title: 'Infinite Scroll Test',
                layout: 'fit',
                items: [grid]
            }
        ]
    });

    vp.show();
    store.guaranteeRange(0, store.pageSize - 1);


    // probably not necessary in real-life situations, but just in case...
    // add this override to handle empty data
    Ext.override(Ext.data.Store, {
        onGuaranteedRange: function() {
            var me = this,
                totalCount = me.getTotalCount(),
                start = me.requestStart,
                end = ((totalCount - 1) < me.requestEnd) ? totalCount - 1 : me.requestEnd,
                range = [],
                record,
                i = start;

            if (start > end) {
                me.guaranteedStart = start;
                me.guaranteedEnd = undefined;
                me.totalCount = undefined;
            }
            else if (start !== me.guaranteedStart && end !== me.guaranteedEnd) {
                me.guaranteedStart = start;
                me.guaranteedEnd = end;

                for (; i <= end; i++) {
                    record = me.prefetchData.getByKey(i);

                    //should never happen
                    if (!record) {
                        Ext.Error.raise("Record was not found and store said it was guaranteed");
                    }

                    range.push(record);
                }
                me.fireEvent('guaranteedrange', range, start, end);
                if (me.cb) {
                    me.cb.call(me.scope || me, range);
                }
            }

            me.unmask();
        }
    });
    
    Ext.Error.handle = function (err) {
        if (err.sourceMethod == "onGuaranteedRange") {
            return true;
        }
    };  
}); 

As long as your data is formatted properly, you should NEVER get either of those pesky errors.

You should grab a data set based on the start and limit params that are automatically sent, and the response should look something like this: {"data":[{"id":"1","name":"Foo Bar","balance":500},...],"total":<the total of ALL the data>}

The grid will load a new set just before you scroll to the end of each page. The last page will contain a smaller set of data, but it loads without error.

Hope this helps!

[stevil]

By the way, 4.0.1 strips this debug code from ext-all, so the workaround is not needed there. It is needed with ext-all-debug, or running from src.

I really wish that, included with the official build were included an un-minified "all".js, so that the ONLY difference is minification, and not the stripping of code.

so, ext-all-debug.js, ext-all.js, ext-all-min.js (or something like it) would be my strong preference.

stevil

[new]

ok thanks I'll try and inform you

stevil tip's works for me too. try it.

thanks man

[Artur Bodera (Joust)]

+1
Please fix it. store.guaranteeRange() should behave equally to store.load()

File: src/data/Store.js
Line: 1545

Here is a workaround (extends Ext.data.Store):

Ext.define('App.store.Store', {
    extend: 'Ext.data.Store',
    buffered: true,

    // -- fix the guaranteeRange() throwing exception on empty data set.
    onGuaranteedRange: function() {
        var me = this,
            totalCount = me.getTotalCount(),
            start = me.requestStart,
            end = ((totalCount - 1) < me.requestEnd) ? totalCount - 1 : me.requestEnd,
            range = []
        ;
            
        if (start > end) {
            me.fireEvent('guaranteedrange', range, start, end);
            if (me.cb) {
                me.cb.call(me.scope || me, range);
            }
            me.unmask();
        }else{
            return this.callParent(arguments);    
        }
    }
});

Remember you have to handle the no-data situation yourself - i.e. listen to 'guaranteedrange'.

[brian.moeskau]

Hey folks, I'm looking into this issue. My initial reaction is that making guaranteeRange public (and required for buffered loading) was probably not ideal to begin with. I'm inclined to say that as far as the public API of store goes, you should always call store.load() -- which in combination with a remote proxy already supports all of the necessary paging params -- and the whole business of guaranteeing ranges should be left as an internal store chore when buffering is needed. Unfortunately this would require API changes, so not sure exactly how I'm going to handle this for now, but I wanted to get feedback before I get started changing things.

Any reason I'm not thinking of that client code would actually want to guarantee that a range exists rather than just loading whatever happens to exist for a given page, buffering or no?

[stevil]

Any reason I'm not thinking of that client code would actually want to guarantee that a range exists rather than just loading whatever happens to exist for a given page, buffering or no?

Agreed. The contract shouldn't change because an exposed property causes a load behavior to change internally. This should also simplify integrating features that trigger reloads (change it one place in the stack and everything else falls into line).

stevil

[edspencer]

Agreed, this whole paradigm is just wrong. I think we can provide a much better API in general for grids in 4.1 (while maintaining the existing one)

[stevil]

Agreed, this whole paradigm is just wrong. I think we can provide a much better API in general for grids in 4.1 (while maintaining the existing one)

I'd go a step further and add DataView and BoundList to the pile - I'd love to have a large, Ajax-searchable, paged combo without a paging toolbar. Maybe that's 4.2, though!

stevil

[edspencer]

Infinite scrolling DataView would be nice...

[stevil]

Indeed.