EXT JS. How do you load all rows in Buffered Scrolling example?

Question

In this example: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/buffer-grid.html

I'd like to add a button titled "Read all", and when it is clicked, all rows should be loaded so no more buffering.

This is useful when the user wants to have more control over all the contents without having to wait for the buffer to finish in special cases.

Thanks, any help is appreciated

Since the buffering works well out of the box, I'd be interested to know more about your special cases. However, you might try to re-display the grid using an unbuffered store (and just wait for it to load, if necessary). — JD Smith
Well, I want to give the users the option of selecting all rows, when buffering is active, they can't select all rows, hence they can't remove them all, it is hard to move up and down and select individual rows and then remove them. — Yasser1984

Wilk Wilk · Accepted Answer · 2012-09-07T23:07:46

Use two store with common model.

The first one is the current one (with buffering, paging, etc.). The second one is a normal store, without buffering, paging, etc. When you click on 'Read all' just load every records into the second store and update the first one with the new data.

Here's an example:

Ext.create ('Ext.grid.Panel', {
    renderTo: Ext.getBody () ,
    width: 300 ,
    height: 300 ,
    store: bufferingStore ,

    columns: [ ... ] ,

    tbar: {
        items: [{
            xtype: 'button' ,
            text: 'Read all' ,
            handler: function (btn) {
                // Here's the call to retrieve all records
                // Also you can do it with 'autoLoad: true' param
                normalStore.load ();

                // Then, flush the bufferingStore, currently use by the grid
                bufferingStore.removeAll ();

                // Populate bufferingStore with normalStore
                normalStore.each (function (record) {
                    bufferingStore.add (record);
                });
            }
        }]
    }
});

normalStore and bufferingStore have the same model but normalStore will have a different source to retrieve each record.

EXT JS. How do you load all rows in Buffered Scrolling example?

1 Answers