PDA

View Full Version : How to scroll to a record in grid panel in extjs 4??



dcoan604
24 Feb 2012, 1:29 PM
Preferably animated
Preferably center the row in the grid ie not at bottom or top after scrolling.

I found this: http://retcron.blogspot.com/2010/09/animated-scroll-ext-js-grid-row-into.html


function smoothScrollIntoView(element, container) {
var c = Ext.getDom(container) || Ext.getBody().dom,
el = element.dom,
o = element.getOffsetsTo(c),
t = o[1] + c.scrollTop,
ch = c.clientHeight;
var newCTop = t - ch / 2;
if (newCTop < 0)
newCTop = 0;
container.scrollTo('top', newCTop, true);
}

function gridRevealRow(grid, rowIndex) {
var row = new Ext.Element(grid.getView().getRow(rowIndex));
smoothScrollIntoView(row, grid.getView().scroller);
}

But couldn't get it to work.

Ultimately I would like to make this a mixin or plugin

Many thanks in advance

dcoan604
24 Feb 2012, 8:51 PM
function smoothScrollIntoView(element, container) {
var c = Ext.getDom(container) || Ext.getBody().dom,
el = element.dom,
o = element.getOffsetsTo(c),
t = o[1] + c.scrollTop,
ch = c.clientHeight;


var newCTop = t - ch / 2;

if (newCTop < 0)
newCTop = 0;

container.scrollTo('top',newCTop, true);

}


function gridRevealRow(grid, rowIndex) {

var row = new Ext.Element(grid.getView().getNode(rowIndex));

smoothScrollIntoView(row, grid.getView().getEl());
}


// useage:--------------------------------------------------------------------

gridRevealRow (myGridPanel, theRecordToScrollTo)



I'm pretty sure the second argument can be a rowId, recordId or the record itself. I've only tested using the record object itself.
Please chime in if you see issues with this, or a better way that I have overlooked. Otherwise I will mark my thread answered....and hopefully this will help someone else.

dcoan604
24 Feb 2012, 9:21 PM
It does do some weird things to the scroll bar though.
Although the record scrolls neatly into view... the scrollbar itself doesn't redraw (or animate as the scrolling is happening). wtf? :-)

I didn't configure a "scroller" for my gridpanel.

My gridpanel occupies the west region of a border layout, which is nested in the center region of a parent border layout. (if that makes sense).

I never set "autoScroll=true" for my gridPanel...and yet I clearly have a scrollbar when required. And the scroll bar adjusts if I change my browser height etc.

When do I need to "manually" add a scroller object?

dcoan604
28 Feb 2012, 6:00 PM
Anyone have tips?