PDA

View Full Version : GridPanel - how to scroll a record into view



gskluzacek
14 Nov 2010, 7:27 PM
I have a GridPanel that is tall enough to display 5 records, when I GridPanel is loaded from the data Store with 10 records, I want to be able to select the last record (which is not currently in view) and then scroll it into view...

Or alternatively if the user has scrolled to the last record in the GridPanel and then clicks a button to add a new record (which is inserted at the top (index position 0) of the GridPanel - and is not currently in view) I would like to select the first record and then scroll it into view.

I know how to select the first and last records respectively:

var sm = this.myGridPanel.getSelectionModel()
sm.selectFirstRow();
sm.selectLastRow();

I see that there is an Ext.Element.scrollIntoView() method, but not sure how to call it on a record. Or how to get the Element object for the currently selected record. For example:

var sm = this.myGridPanel.getSelectionModel();
var rec = sm.getSelected();
rec.scrollIntoView(this.myGridPanel); // Doesn't work???

Thanks in advanced,
-- Greg

gskluzacek
14 Nov 2010, 10:38 PM
OK, I think this is what I needed.

1) create a new record at the top of the grid panel, 2) select it and 3) scroll it into view...


this.myGridPanel.getStore().insert(0, new this.myGridPanel.getStore().recordType(defaultFieldValues));
this.myGridPanel.getSelectionModel().selectFirstRow();
this.myGridPanel.getView().getRow(0).scrollIntoView();
Or, 1) create a new record at the bottom of the grid panel, 2) select it and 3) scroll it into view...


this.myGridPanel.getStore().add(new this.myGridPanel.getStore().recordType(defaultFieldValues));
this.myGridPanel.getSelectionModel().selectLastRow();
this.myGridPanel.getView().getRow(this.myGridPanel.getStore().getCount()-1).scrollIntoView();Hope someone finds this helpful.