PDA

View Full Version : [OPEN] [#288] Remote Paging - Infinite Scroll - different beahviour between Chrome and IE 10



tanky65
Jun 26, 2013, 2:43 PM
I got the following different behaviour between browsers in the subject:

Please, consider the following example containing code aspx and code ashx (ObjectHandler.ashx) for the remote service

the example wants to handle the browse of a very high number of records (1.200.000 (sure, really very huge)) paged remotely.

The behaviour in Chrome is as expected: you can navigate from the first record until the last one (1.200.000)
The behaviour in IE 10 is different (limited nr. of recs): it is possible to navigate until the record nr. (circa) 73.117



<%@ WebHandler Language="C#" Class="ObjectHandler" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using Ext.Net;
using Newtonsoft.Json;
using System.Data;
using System.Collections.Generic;

public class ObjectHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var requestParams = new StoreRequestParameters(context);

int start = requestParams.Start;
int limit = requestParams.Start + requestParams.Limit;

string query = requestParams.Query;

var data = PartNumber.GetData(start, limit, query);

var pns = new Paging<PartNumber>(data, PartNumber.GetTotalCount(query));

context.Response.Write(JSON.Serialize(pns));
}

public bool IsReusable
{
get
{
return false;
}
}
}

public class PartNumber
{
public static int TotalDataCount = -1;

public PartNumber()
{

}

public string PNMD_CD_PLANT { get; set; }
public string PNMD_CD_PART_NUMBER { get; set; }
public string PNMD_CD_PART_WPS { get; set; }
public string PNMD_DS_PART_DESC { get; set; }
public DateTime PNMD_DT_LAST_UPDATE { get; set; }
public string PNMD_CD_UOM { get; set; }
public Decimal RNUM { get; set; }

public static int GetTotalCount(string part = "")
{
// set an arbitrary value very high
return 1200000;
}

public static List<PartNumber> GetData(int start, int limit, string query = "")
{
List<PartNumber> data = new List<PartNumber>(limit - start);

if (start < 0) start = 0;
if (limit < 0) limit = 20;
for (int i = start; i < limit; i++)
{
PartNumber p = new PartNumber();
p.RNUM = i;
p.PNMD_CD_PART_NUMBER = i.ToString().PadLeft(8, '0');
p.PNMD_CD_PART_WPS = "WPS" + i.ToString().PadLeft(8, '0');
p.PNMD_CD_PLANT = "TO";
p.PNMD_DS_PART_DESC = "Description of " + i.ToString().PadLeft(8, '0');
p.PNMD_DT_LAST_UPDATE = DateTime.Now;
p.PNMD_CD_UOM = "XY";

data.Add(p);
}

return data;
}
}




<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Infinite Scrolling with remote filtering</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>

var searchFieldTriggerClick = function (field, trigger, index) {
var me = field,
store = me.up("grid").getStore(),
value = me.getValue();

if (index == 0) {
me.setValue('');
store.clearFilter();
trigger.hide();
}
else {
if (value.length > 0) {
// Param name is ignored here since we use custom encoding in the proxy.
// id is used by the Store to replace any previous filter
store.filter({
id: store.proxy.filterParam,
property: store.proxy.filterParam,
value: value
});
me.getTrigger(0).show();
}
}
};

var onSpecialKey = function (field, e) {
if (e.getKey() === e.ENTER) {
searchFieldTriggerClick(field, null, 1);
e.stopEvent();
}
};

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false"
RethrowAjaxExceptions="true" />
<ext:GridPanel ID="GridPanel1" runat="server" Width="700" Height="500" Collapsible="true"
Title="Part Numbers - Browse">
<Store>
<ext:Store ID="Store1" runat="server" Buffered="true" RemoteFilter="true" LeadingBufferZone="1000"
PageSize="50">
<Proxy>
<ext:AjaxProxy Url="ObjectHandler.ashx" SimpleSortMode="true" FilterParam="query">
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="data" TotalProperty="total" />
</Reader>
<CustomConfig>
<ext:ConfigItem Name="encodeFilters" Value="function (filters) { return filters[0].value; }"
Mode="Raw" />
</CustomConfig>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="ModelPN" runat="server" IDProperty="PNMD_CD_PART_WPS">
<Fields>
<ext:ModelField Name="PNMD_CD_PLANT" />
<ext:ModelField Name="PNMD_CD_PART_NUMBER" />
<ext:ModelField Name="PNMD_CD_PART_WPS" Type="String" />
<ext:ModelField Name="PNMD_DS_PART_DESC" />
<ext:ModelField Name="PNMD_DT_LAST_UPDATE" />
<ext:ModelField Name="PNMD_CD_UOM" />
<ext:ModelField Name="RNUM" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<TotalCountChange Handler="#{GridPanel1}.down('#status').update({ count: this.getTotalCount() });" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column4" runat="server" Text="Nr." DataIndex="RNUM" Flex="1" />
<ext:Column ID="Column1" runat="server" Text="Plant" DataIndex="PNMD_CD_PLANT" Flex="3" />
<ext:Column ID="Column2" runat="server" Text="Part Code" DataIndex="PNMD_CD_PART_NUMBER"
Flex="4" />
<ext:Column ID="Column3" runat="server" Text="Client code" DataIndex="PNMD_CD_PART_WPS"
Flex="4" />
<ext:Column ID="Column5" runat="server" Text="Description" DataIndex="PNMD_DS_PART_DESC"
Flex="5">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:DateColumn ID="Column6" runat="server" Text="Last update" DataIndex="PNMD_DT_LAST_UPDATE"
Flex="4" />
<ext:Column ID="Column7" runat="server" Text="UOM" DataIndex="PNMD_CD_UOM" Flex="1" />
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" EmptyText="<h1 style='margin:20px;'>No matching results</h1>" />
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelMode" runat="server" Mode="Single">
</ext:RowSelectionModel>
</SelectionModel>
<DockedItems>
<ext:Toolbar ID="Toolbar1" runat="server" Dock="Top">
<Items>
<ext:TriggerField ID="TriggerField1" runat="server" Hidden="true" Width="200" FieldLabel="Search"
LabelWidth="50">
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
<ext:FieldTrigger Icon="Search" />
</Triggers>
<Listeners>
<TriggerClick Fn="searchFieldTriggerClick" />
<SpecialKey Fn="onSpecialKey" />
</Listeners>
</ext:TriggerField>
<ext:ToolbarFill />
<ext:Component ID="Component1" runat="server" ItemID="status" StyleSpec="margin-right:5px;">
<Tpl runat="server">
<Html>
Matching threads: {count}
</Html>
</Tpl>
</ext:Component>
</Items>
</ext:Toolbar>
</DockedItems>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jun 26, 2013, 4:23 PM
Hi @tanky65,

Thank you for the report. I can confirm that weird behavior.

Chrome shows 1199998 for me. Though 1199999 is supposed to be the last item. How is it on your side?

FireFox shows 822175 which is too far from the last item.

IE9 shows 73114 which is too-too far from the last item.

I was able to reproduce it with the latest source from SVN trunk and v2.2 release.

We are investigating. I guess there is some rounding mistake with scroll height and/or position.

tanky65
Jun 26, 2013, 4:40 PM
hi Daniil,

my numbers are quite different for IE.

73.116 for IE (it seems to be not stable while moving slowly the mouse wheel up/dwn, it passes to 73.113, 73.114)
1.199.998 for chrome

Firefox not available now

Daniil
Jun 27, 2013, 6:41 AM
I was able to reproduce it with pure ExtJS.
http://www.sencha.com/forum/showthread.php?266708

Here is a similar problem.
http://www.sencha.com/forum/showthread.php?265323

Created an Issue to track this defect.
https://github.com/extnet/Ext.NET/issues/288

tanky65
Sep 27, 2013, 5:54 PM
Hi Daniil,
any new about this thread ?
thans in advance
bye

Daniil
Sep 30, 2013, 6:15 AM
Unfortunately, there are no news. The Sencha threads are still open. We are not able to fix it as well.