PDA

View Full Version : Scroll to a record in an infinite grid



zerkms
21 May 2012, 4:11 PM
How to scroll to a record with particular index in an infinite grid?

Let's say initially the scroll is on top, the total rows is 5000, the page size is 200 and I want to scroll to a 100th row.

How to do that?

grid.view.focusRow() wouldn't help, because it only can scroll to a row that is already in buffer

sword-it
21 May 2012, 10:02 PM
Hi,
try this



var scrollPosition = 100;
YourGrid.getStore().load( function() {
YourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition, false);
});



For more details, check this:- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-scrollTo

zerkms
21 May 2012, 11:19 PM
Hi,
try this



var scrollPosition = 100;
YourGrid.getStore().load( function() {
YourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition, false);
});



For more details, check this:- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-scrollTo

It is a buffered store - I cannot just `load()` it

sword-it
21 May 2012, 11:32 PM
Hi, it was just sample to scroll while loading of grid...
you may do the following functionality on any event..like on clicking of button, saving of record, deleting an record, etc...

Just use following to scroll to specific position of your choice




var scrollPosition = 100;
YourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition, false);




here,

'top' refers to side of scrolling, Either "left" for scrollLeft values or "top" for scrollTop values.
scrollPosition refers to position you want to scroll to
false is to prevent animation of scrolling. you may also enable animation certainly depends on your needs.

zerkms
21 May 2012, 11:45 PM
Hi, it was just sample to scroll while loading of grid...
you may do the following functionality on any event..like on clicking of button, saving of record, deleting an record, etc...

Just use following to scroll to specific position of your choice




var scrollPosition = 100;
YourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition, false);




here,

'top' refers to side of scrolling, Either "left" for scrollLeft values or "top" for scrollTop values.
scrollPosition refers to position you want to scroll to
false is to prevent animation of scrolling. you may also enable animation certainly depends on your needs.


scrollTo wouldn't work - it relies on the fact that the record we're scrolling to is already in store. I cannot refer to a particular place in extjs code that does that assumption since I'm at home for now, but tomorrow I'll give a stacktrace that proofs that

zerkms
22 May 2012, 12:17 PM
Hi, it was just sample to scroll while loading of grid...
you may do the following functionality on any event..like on clicking of button, saving of record, deleting an record, etc...

Just use following to scroll to specific position of your choice




var scrollPosition = 100;
YourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition, false);




here,

'top' refers to side of scrolling, Either "left" for scrollLeft values or "top" for scrollTop values.
scrollPosition refers to position you want to scroll to
false is to prevent animation of scrolling. you may also enable animation certainly depends on your needs.


Well, I was wrong - it performs scroll, but to 100 px from the top :-)

the same can be done with less keystrokes:

grid.view.scrollBy(0,
scrollPosition)

So, not a solution :-(

miti
3 Jul 2012, 1:59 PM
Anyone find a solution?

zerkms
3 Jul 2012, 2:07 PM
@miti,

I did: I just scroll down to the Nth position assuming that all the rows have the same height (and in my case it is true)

miti
3 Jul 2012, 3:59 PM
Thanks, zerkms!

I just tried store.guaranteeRange and it seems to work. I am still in the process of fully understanding buffered store though...

zerkms
3 Jul 2012, 4:09 PM
Buffered store is simple: it is a double buffering implemented in extjs store, the small buffer is the one, that is used to display rows, and the bigger is a LRU one, the one, the data is put into.