So i would consider this a super critical defect and would definitely fix it before releasing.
Basically, the crux of the issue is that when we are "scrolling" with the scrollbar, EXT is firing the PagingToolbar "select" handler.
it happens that we call "reload" in this handler so the bug was obvious to us. If we didnt have a reload, we might have missed this.
again, this is super critical as we use this pagination everywhere so please fix before releasing.
Steps to reproduce:
1. load page
2. press loadME button (50 records)
3. now change the combo (in paging toolbar) from 50 to 500.
4. after it reloads, use the scrollbar on the right to scroll.
few items to note.
* using the mouse wheel doesnt cause the bug, only using the right scrollbar
* if you have more than 500 records total, the bug doesnt occur, so we set the controller GetData2 function to 245 elements.
Thanks,
/Z
aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Search TestMe</title>
</head>
<body>
<form id="FormSearchTestMe" runat="server">
<ext:ResourceManager ID="ResourceManagerSearchTestMe" runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:Panel Layout="CardLayout" runat="server" AutoWidth="true" ActiveIndex="0" ID="SearchCardContainer" Border="False">
<BottomBar>
<ext:Toolbar ID="ToolbarSearchTestMe" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Load ME" Icon="Find">
<Listeners>
<Click Handler="App.GridPanelSearchResults.getStore().reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
<Items>
<ext:GridPanel
ID="GridPanelSearchResults"
runat="server"
Hidden="true"
Layout="FitLayout"
Anchor="100% 100%"
AutoRender="true">
<Store>
<ext:Store ID="StoreSearchResults" runat="server" RemoteSort="false" AutoLoad="false" PageSize="50">
<Proxy>
<ext:AjaxProxy Url="/ta/Support/GetData2">
<ActionMethods READ="GET" />
<Reader>
<ext:JsonReader RootProperty="data" IDProperty="id" TotalProperty="total"/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Parameters>
<ext:StoreParameter Name="limit" Value="#{StoreSearchResults}.pageSize" Mode="Raw" />
</Parameters>
<Model>
<ext:Model ID="Model9" IDProperty="id" runat="server">
<Fields>
<ext:ModelField Name="id" Type="Int" />
<ext:ModelField Name="data1" Type="String" />
<ext:ModelField Name="data2" Type="String" />
<ext:ModelField Name="data3" Type="String" />
<ext:ModelField Name="data4" Type="String" />
<ext:ModelField Name="data5" Type="String" />
<ext:ModelField Name="data6" Type="Date" />
<ext:ModelField Name="data7" Type="String" />
<ext:ModelField Name="data8" Type="String" />
<ext:ModelField Name="data9" Type="Int" />
<ext:ModelField Name="data10" Type="Int" />
<ext:ModelField Name="data11" Type="Int" />
<ext:ModelField Name="data12" Type="Int" />
<ext:ModelField Name="data13" Type="String" />
<ext:ModelField Name="data14" Type="String" />
<ext:ModelField Name="data15" Type="String" />
<ext:ModelField Name="data16" Type="String" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="data6" Direction="DESC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModelSearchTestMes" runat="server">
<Columns>
<ext:Column runat="server" ID="id" Text="Id" DataIndex="id" Width="50" Sortable="true" Hidden="true" />
<ext:Column runat="server" ID="data1" Text="Data1" DataIndex="data1" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data2" Text="Data2" DataIndex="data2" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data3" Text="Data3" DataIndex="data3" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data4" Text="Data4" DataIndex="data4" Width="110" Sortable="true" />
<ext:Column runat="server" ID="data5" Text="Data5" DataIndex="data5" Width="100" Sortable="true" />
<ext:Column runat="server" ID="data7" Text="Data7" DataIndex="data7" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data8" Text="Data8" DataIndex="data8" Width="75" Sortable="true" />
<ext:Column runat="server" ID="data13" Text="Data13" DataIndex="data13" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data14" Text="Data14" DataIndex="data14" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data15" Text="Data15" DataIndex="data15" Width="75" Align="End" Sortable="true" />
<ext:Column runat="server" ID="data16" Text="Data16" DataIndex="data16" Width="75" Align="End" Sortable="true" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1"
runat="server"
DisplayInfo="true"
DisplayMsg="Displaying results {0} - {1} of {2}"
EmptyMsg="No results to display">
<Items>
<ext:Label ID="Label1" runat="server" Text="Page size:" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="5" />
<ext:ComboBox ID="ComboBoxPaging" runat="server" Width="50" Editable="false">
<Items>
<ext:ListItem Text="50" />
<ext:ListItem Text="100" />
<ext:ListItem Text="250" />
<ext:ListItem Text="500" />
</Items>
<SelectedItems><ext:ListItem Value="50" /></SelectedItems>
<ListConfig Width="50" />
<Listeners>
<Select Handler="#{StoreSearchResults}.pageSize = parseInt(this.getValue()); #{PagingToolbar1}.getStore().load();" />
<AfterRender Handler="var size = 50; #{StoreSearchResults}.pageSize = parseInt(size); this.setValue(size);" />
</Listeners>
</ext:ComboBox>
</Items>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
controller
public ActionResult GetData2(int? start, int? limit, string sort, string dir)
{
List<TestData2> l = new List<TestData2>();
for (int i = 0; i < 245; i++)
{
TestData2 t = new TestData2();
t.id = i;
t.data1 = "test_" + i;
t.data2 = "test_" + i;
t.data3 = "test_" + i;
t.data4 = "test_" + i;
t.data5 = "test_" + i;
t.data6 = DateTime.Now.AddDays(i);
t.data7 = "test_" + i;
t.data8 = "test_" + i;
t.data9 = i;
t.data10 = i;
t.data11 = i;
t.data12 = i;
t.data13 = "test_" + i;
t.data14 = "test_" + i;
t.data15 = "test_" + i;
t.data16 = "test_" + i;
l.Add(t);
}
var query = l.Select(dt => new
{
id = dt.id,
data1 = dt.data1,
data2 = dt.data2,
data3 = dt.data3,
data4 = dt.data4,
data5 = dt.data5,
data6 = dt.data6,
data7 = dt.data7,
data8 = dt.data8,
data9 = dt.data9,
data10 = dt.data10,
data11 = dt.data11,
data12 = dt.data12,
data13 = dt.data13,
data14 = dt.data14,
data15 = dt.data15,
data16 = dt.data16
}).OrderBy(d => d.id);
return this.Store(query.Skip(start.HasValue ? start.Value : 0).Take(limit.HasValue ? limit.Value : 500), query.Count());
}
class
public class TestData2
{
public long id;
public string data1;
public string data2;
public string data3;
public string data4;
public string data5;
public DateTime data6;
public string data7;
public string data8;
public int data9;
public int data10;
public int data11;
public int data12;
public string data13;
public string data14;
public string data15;
public string data16;
}