Feb 05, 2015, 1:11 PM
[FIXED] [#703] GridPanel scroll inconsistency
Hi,
Update: I experienced the described problem under Windows 8 with IE 11. Have not tested other browsers yet.
I have noticed some inconsistent behavior in GridPanel's scrollbar when changing pages. This might lead to some unexpected problems which I will describe later.
How to reproduce:
1. Run the code below
2. Scroll down to the last row in the first page
3. Click "Next" page.
4. The scroll bar is set back to the first row of the second page <- This is behavior I would expect when going to every next page.
5. Scroll down again to the last row in the second page
6. Click "Next" page.
7. Scroll is NOT GOING BACK to the first row of next page
8. Click "Next" page.
9. Scroll position remains at the end of the next page
10. And so on.... to the last page where scroll position is adjusted base on number of rows in the last page.
The example code:
Questions:
1. Is there any setting that let the scroll remain in the same position ?
2. How can we make scroll going back to the first row ?
Unexpected problem(s):
I could not reproduce the unexpected problem in example code above.
From time to time I ended up with exception in Ext.view.NodeCache in function "scroll". That function is ending with:
The outcome of that was a big gap in the beginning of my gridpanel:
I added "quick fix" to the end of the "scroll" function:
but it is not the best solution (and there are cases I don't get exception and still end up with the gap)
Thank you
Update: I experienced the described problem under Windows 8 with IE 11. Have not tested other browsers yet.
I have noticed some inconsistent behavior in GridPanel's scrollbar when changing pages. This might lead to some unexpected problems which I will describe later.
How to reproduce:
1. Run the code below
2. Scroll down to the last row in the first page
3. Click "Next" page.
4. The scroll bar is set back to the first row of the second page <- This is behavior I would expect when going to every next page.
5. Scroll down again to the last row in the second page
6. Click "Next" page.
7. Scroll is NOT GOING BACK to the first row of next page
8. Click "Next" page.
9. Scroll position remains at the end of the next page
10. And so on.... to the last page where scroll position is adjusted base on number of rows in the last page.
The example code:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
private object[] TestData
{
get
{
List<object> results = new List<object>();
for (int i = 0; i < 100; i++)
{
results.AddRange(
new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" }
});
}
return results.ToArray();
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData;
}
}
protected void Store1_Refresh(object sender, StoreReadDataEventArgs e)
{
this.Store1.DataSource = this.TestData;
this.Store1.DataBind();
}
</script>
<html>
<head runat="server">
<title>Scroll positioning issue</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store
ID="Store1"
runat="server"
OnReadData="Store1_Refresh"
PageSize="100">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel
ID="GridPanel1"
runat="server"
StoreID="Store1"
Title="Array Grid"
Width="600"
Frame="true"
Height="300">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" Width="75" DataIndex="price" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
<ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange" />
<ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi">
</ext:CheckboxSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="Store1" DisplayInfo="true">
<Plugins>
<ext:SlidingPager runat="server" />
</Plugins>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>Questions:
1. Is there any setting that let the scroll remain in the same position ?
2. How can we make scroll going back to the first row ?
Unexpected problem(s):
I could not reproduce the unexpected problem in example code above.
From time to time I ended up with exception in Ext.view.NodeCache in function "scroll". That function is ending with:
return newNodes.childrenArrayThe outcome of that was a big gap in the beginning of my gridpanel:
I added "quick fix" to the end of the "scroll" function:
if (newNodes) {
return newNodes.childrenArray
}
else {
return null;
}but it is not the best solution (and there are cases I don't get exception and still end up with the gap)
Thank you
Last edited by fabricio.murta; Apr 27, 2016 at 2:27 AM.
