Hi smart+,
Please look at the example.
At the moment I'm investigating why the scroll comes back to the first row.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[] {
new object[] {"test0" },
new object[] {"test1" },
new object[] {"test2" },
new object[] {"test3" },
new object[] {"test4" },
new object[] {"test5" },
new object[] {"test6" },
new object[] {"test7" },
new object[] {"test8" }
};
store.DataBind();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var addRowAndSelectAndScroll = function(grid, record) {
grid.getStore().add(record);
var pagingToolbar = grid.getBottomToolbar();
pagingToolbar.indexToSelect = grid.getStore().getTotalCount() - 1,
pagingToolbar.on('change', changeHandler); //to select row
grid.getStore().on('datachanged', datachangedHandler); //to scroll
grid.getView().rowHeight = grid.getView().getRow(0).offsetHeight;
setPage(pagingToolbar);
}
var changeHandler = function() {
GridPanel1.getSelectionModel().selectRow(this.indexToSelect % this.pageSize);
this.un('change', changeHandler);
}
var setPage = function(pagingToolbar) {
var newPage = Math.ceil((pagingToolbar.indexToSelect + 1) / pagingToolbar.pageSize);
pagingToolbar.changePage(newPage);
}
var datachangedHandler = function() {
var pagingToolbar = GridPanel1.getBottomToolbar(),
view = GridPanel1.getView();
view.scroller.scroll('b', view.rowHeight * (pagingToolbar.indexToSelect % pagingToolbar.pageSize));
this.un('datachanged', datachangedHandler);
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Height="100"
Width="500">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" PageSize="5" />
</BottomBar>
</ext:GridPanel>
<ext:Button runat="server" Text="Add row">
<Listeners>
<Click Handler="var newRecord = new Ext.data.Record();
newRecord.set('test', 'test new');
addRowAndSelectAndScroll(#{GridPanel1}, newRecord); " />
</Listeners>
</ext:Button>
</form>
</body>
</html>
