Grid buffered/infinite scrolling in 4.1

[tvanzoelen]

I want to but then I must make a suitable sample first. My code is a combination of a lot of tricks to get that buffered thing working with a memory store.

[karlsnyder0]

@westy

I wrote a similar toolbar for my infinite grid and I also had to tweak the numbers to get them right. Thanks for sharing!

Just changed one of my grids to infinite, and quite like it.

Had to write a little toolbar, since I like the 'Displaying 1 - 10 of 306' from the paging toolbar.
Have also added a refresh button... looks good.

My one concern is I seem to be able to make it hang.
Scrolling about normally seems ok, but if grab the scroller thumb and jump massively ahead, then back to start you often end up with a loading mask that never goes away.
No errors in Firebug.

Will try and figure out what's going on, but suspect it's to do with a load happening whilst another is still in progress.

This has to be rock solid, otherwise it's not an option. I love the concept though

Cheers,
Westy

Edit: My bbar for anyone that's interested; obviously you'll need to sort out the refresh yourself.

Not quite sure why the start value needs tweaking, but it's not too bad...

        bbar: {
            items: [
                {
                    iconCls: 'icon-refresh',
                    handler: function(button) {
                        var grid = button.up('altus-grid');
                        if (grid) {
                            grid.refreshMaintainingSelection();
                        }
                    }
                },
                '->',
                {
                    xtype: 'tbtext',
                    itemId: 'lblDisplayInfo'
                }
            ]
        },

...

        initComponent: function() {
            this.callParent(arguments);


            var me = this,
                view = me.getView(),
                toolbarDispInfo = me.down('#lblDisplayInfo'),
                verticalScroller = me.verticalScroller,
                store = me.getStore(),
                updateToolbarDisplayInfo = function() {
                    var total = store.getTotalCount();
                    toolbarDispInfo.setText(Ext.String.format('Displaying {0} - {1} of {2}',
                                                              verticalScroller.getFirstVisibleRowIndex() + 1,
                                                              total ? Math.min(verticalScroller.getLastVisibleRowIndex(), total) : verticalScroller.getLastVisibleRowIndex(),
                                                              total ? total : 'Unknown'));
                };


            me.mon(
                view,
                'bodyscroll',
                updateToolbarDisplayInfo);
            me.mon(
                view,
                'resize',
                updateToolbarDisplayInfo);
            me.mon(
                store,
                'prefetch',
                updateToolbarDisplayInfo);
        }

[rkim]

Grouping grid is supported with infinite grid ?

For example, Grid is grouped alphabetically by one column.

If the first page contains A group and B group only, and when next page contains little bit of B group and C group, would infinite grid properly extend B group and create new C group header ??

[lancer2]

Hi ,
why the Buffered Grid doesn't word when i used store.loadData(somedata) after ?
How to change the complete data of a grid panel? I tried grid.reconfigure(newStore,colModel),but lost..


Some help??


Thanks

[karlsnyder0]

Grouping grid is supported with infinite grid ?

For example, Grid is grouped alphabetically by one column.

If the first page contains A group and B group only, and when next page contains little bit of B group and C group, would infinite grid properly extend B group and create new C group header ??

We use Grouping with Infinite Grid and it works great! Be sure to check out the known issues with remote grouping in some of my Forum Posts.

[Curtis Fletcher]

I'm having trouble maintaining scroll position over a (times) reload with the the new buffered store/grid.

I started with this on the GridPanel:

    reload: function () {
        var me = this;
        me.getView().saveScrollState();
        me.getStore().pageMap.clear();
        me.getStore().load({
            callback: function() {
                me.getView().restoreScrollState();
            }
        })
    }

But that didn't actually re-request any data from the server so I added store.clearData();

    reload: function () {
        var me = this;
        me.getView().saveScrollState();
        me.getStore().pageMap.clear();
        me.getStore().clearData();
        me.getStore().load({

            callback: function() {
                me.getView().restoreScrollState();
            }
        })
    }

However that loads the initial pages first then loads the pages to satisfy the scrolled position so I'd like to use LoadPage() however to do this I'd need the value of store.currentPage and it doesn't seem to get set when using the grid scroller to control store loading (It remains at 1 regardless how far I scroll/which pages have been loaded by the store).

What is the recommended way to load a (new) buffered grid at a specific scroll/page position?

[panpur]

Calling model.set(fieldName, newValue) generates error: "NOT_FOUND_ERR: DOM Exception 8"
I was trying to update cell value on cellclick. It works fine on normal grid.

Tested on 4.1 final. Is this a bug?

Thanks

[shmeltex]

Calling model.set(fieldName, newValue) generates error: "NOT_FOUND_ERR: DOM Exception 8"
I was trying to update cell value on cellclick. It works fine on normal grid.

Tested on 4.1 final. Is this a bug?

Thanks

I use model.set with buffered store with no issue. You probably hitting an edge case and will need to post code sample.

[panpur]

I use model.set with buffered store with no issue. You probably hitting an edge case and will need to post code sample.

Thanks for the response. On further investigation it turns out that there's a problem on my renderer.

[nbourdeau]

It would be incredibly difficult to work.

The small subset of data in the Store might contain the last 10 rows of group A, then all of group B, then the first 10 rows of group C

You probably would not want group A's header row to be shown. How could we not render it? The store is grouped, there's a group of "A"s, so it would put a group header in.

So then when scrolling, and it gets re-rendered as the last 30 rows of group B, all of group C, and the first 5 rows of group D, what would the scrollTop of the table element have to be?

It calculates the scrollTop based upon the first store row's ordinal position in the dataset. But there may be an unknown number of group headers in the mix too which change that position.

It's all very complicated.

Hi Animal,

In relation to this post: http://www.sencha.com/forum/showthre...l=1#post671091

It should be possible with only "buffered rendering" ?