PDA

View Full Version : [CLOSED] Scroll to selected row in GridPanel



Jurke
Mar 25, 2020, 3:55 PM
Hi
I have a DropDownField that shows a gridpanel with a id and a text. The dropdownfield has a start value which I select in the gridpanel (this works) by this code:
App.gpEditUtforare.getSelectionModel().select(App. storeEditUtforare.find('ID', this.getValue())) Then I want the gridpanel to scroll to that selected row.
I tried with focusRow(), but I can't get it to work. I hope you can give me some help without a full example.



<ext:DropDownField runat="server">
<Listeners>
<Expand Handler="this.picker.setWidth(300); App.gpEditUtforare.getSelectionModel().select(App. storeEditUtforare.find('ID', this.getValue()))" />
</Listeners>
<Component>


<ext:GridPanel
runat="server"
ID="gpEditUtforare"
StripeRows="true"
Height="250"
Border="false"
Header="false"
ColumnLines="true">
<Store>
<ext:Store
ID="storeEditUtforare"
GroupField="ID"
runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="NAMN" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Header="ID" Width="100" DataIndex="ID"></ext:Column>
<ext:Column runat="server" Header="Namn" Flex="1" DataIndex="NAMN"></ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<RowClick Handler="this.dropDownField.setValue(record.data.ID);"></RowClick>
</Listeners>
</ext:GridPanel>
</Component>
</ext:DropDownField>


Thanks
Mikael

fabricio.murta
Mar 25, 2020, 9:44 PM
Hello Mikael!

If you get one and only one record selected in the grid every time, you can use the grid view's getRow() method (https://docs.sencha.com/extjs/7.1.0/classic/Ext.view.Table.html#method-getRow) to scroll the grid to the record you have selected -- as long as it is rendered and in the page you are.

If your grid uses buffered rendering and is long enough to have the record not rendered at all times, it may become unable to determine where to scroll to. If you have paging feature in the grid, you'd need also to ensure the selected record is in the current page before you can try to scroll.

Given the context you provided, this should be enough to scroll to the selected entry, when you do the selection in the code you shown first:



var grid = App.gpEditUtforare,
store = grid.getStore(),
view = grid.getView();

view.getRow(store.getAt(store.find("ID", this.getValue())).scrollIntoView();


You may want to double check whether store.getAt() can return something valid, i.e. store.find() result is an index >= 0.

The scrollIntoView() bit comes from browser implementation; the getRow() method returns a DOM Element. Documentation on Element.scrollIntoView() (https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView).

I believe this is as far and deep we can get with the provided information. If still in trouble, I am afraid we would require a test case.

Hope this helps, nevertheless!

Jurke
Mar 26, 2020, 11:56 AM
Hi
That worked perfectly, thanks a lot!

/Mikael

fabricio.murta
Mar 26, 2020, 7:18 PM
Hello Mikael!

Glad we could help with the tips provided, thanks for the feedback!