PDA

View Full Version : [CLOSED] RemoteSort for buffered store



gets_gui
Apr 12, 2012, 5:42 PM
Hi,

I have a store with RemoteSort="true", the sorting is working fine in 1.3.
In 2.0, I try to enable the buffer.

<ext:Store ID="clientStore" runat="server" GroupField="key" RemoteSort="true" PageSize="50" Buffered="true" PurgePageCount="0" >
Just wondering if the remote sorting is working for buffered store in 2.0?

Daniil
Apr 12, 2012, 6:16 PM
Hi,

Well, we think it should work.

Here is the related thread on Sencha.
http://www.sencha.com/forum/showthread.php?190791

gets_gui
Apr 12, 2012, 7:12 PM
Actually, I also use grouping/summary for the grid...

Daniil
Apr 13, 2012, 11:11 AM
Well, we don't think grouping and summary can work with

Buffered="true"

gets_gui
Apr 17, 2012, 1:36 PM
It seems working for some reason.

Daniil
Apr 17, 2012, 1:51 PM
I would appreciate if you will post an example.

gets_gui
Apr 17, 2012, 3:22 PM
I tried to add the grouping and summary into your buffered scrolling example, I got the "Object doesn't support this property or method" message for this.store.cacheRecords(this.store.proxy.getRecord s()).
I am using the latest version in SVN.

Daniil
Apr 17, 2012, 3:58 PM
Well, the answer is here:
http://forums.ext.net/showthread.php?18381&p=79350&viewfull=1#post79350

gets_gui
Apr 17, 2012, 4:06 PM
I got the error when I just copied the source code from the example website without adding any grouping code.

Daniil
Apr 17, 2012, 4:28 PM
Please clarify what exactly example do you mean?

gets_gui
Apr 17, 2012, 5:44 PM
The buffered scrolling example


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

<%@ Import Namespace="System.Linq" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData(5000);
this.Store1.DataBind();
}
}

private object[] TestData(int count)
{
var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
var ratings = new int[] { 1, 2, 3, 4, 5 };
var salaries = new int[] { 100, 400, 900, 1500, 1000000 };

var data = new object[count];
var rnd = new Random();

for (int i = 0; i < count; i++)
{
var ratingId = rnd.Next(ratings.Length);
var salaryId = rnd.Next(salaries.Length);
var firstNameId = rnd.Next(firstNames.Length);
var lastNameId = rnd.Next(lastNames.Length);

var rating = ratings[ratingId];
var salary = salaries[salaryId];
var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

data[i] = new object[] { name, rating, salary };
}

return data;
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Buffered Scrolling - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Buffered Scrolling</h1>

<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<p>This example illustrates loading of all the records up front and buffering the rendering.</p>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Bufffered Grid of 5,000 random records"
DisableSelection="true"
InvalidateScrollerOnRefresh="false"
Width="700"
Height="500">
<Store>
<ext:Store
ID="Store1"
runat="server"
PageSize="50"
Buffered="true"
PurgePageCount="0"
AutoLoad="false">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="rating" Type="Int" />
<ext:ModelField Name="salary" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<%--<VerticalScroller>
<ext:GridPagingScroller ID="GridPagingScroller1" runat="server" ActivePrefetch="false" />
</VerticalScroller>--%>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" />
</View>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
<ext:Column ID="Column1" runat="server" Text="Name" Flex="1" DataIndex="name" />
<ext:Column ID="Column2" runat="server" Text="Rating" Width="125" DataIndex="rating" />
<ext:Column ID="Column3" runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<AfterRender Handler="this.store.cacheRecords(this.store.proxy.getRecord s());this.store.guaranteeRange(0, 49);" Delay="100" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

I got the Object doesn't support this property or method for the AfterRender Handler (store.cacheRecords method).

Daniil
Apr 17, 2012, 5:50 PM
Well, it has been updated in SVN.

The last Ext.NET.Examples sources you can get here:
https://github.com/extnet/Ext.NET.Examples

Example

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

<%@ Import Namespace="System.Linq" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData(5000);
this.Store1.DataBind();
}
}

private object[] TestData(int count)
{
var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
var ratings = new int[] { 1, 2, 3, 4, 5 };
var salaries = new int[] { 100, 400, 900, 1500, 1000000 };

var data = new object[count];
var rnd = new Random();

for (int i = 0; i < count; i++)
{
var ratingId = rnd.Next(ratings.Length);
var salaryId = rnd.Next(salaries.Length);
var firstNameId = rnd.Next(firstNames.Length);
var lastNameId = rnd.Next(lastNames.Length);

var rating = ratings[ratingId];
var salary = salaries[salaryId];
var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

data[i] = new object[] { name, rating, salary };
}

return data;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Buffered Scrolling - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>Buffered Scrolling</h1>

<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<p>This example illustrates loading of all the records up front and buffering the rendering.</p>

<ext:GridPanel
runat="server"
Title="Bufffered Grid of 5,000 random records"
DisableSelection="true"
Width="700"
Height="500">
<Store>
<ext:Store
ID="Store1"
runat="server"
PageSize="5000"
Buffered="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="rating" Type="Int" />
<ext:ModelField Name="salary" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView runat="server" TrackOver="false" />
</View>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" Width="40" Sortable="false" />
<ext:Column runat="server" Text="Name" Flex="1" DataIndex="name" />
<ext:Column runat="server" Text="Rating" Width="125" DataIndex="rating" />
<ext:Column runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

gets_gui
Apr 17, 2012, 6:13 PM
It looks like there is a problem for group summary count when the group is too big?
I don't see problem for my project since the group normally contains only less than 10 rows.
Please advise if you foresee any potential problem.

Here is the code:



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

<%@ Import Namespace="System.Linq" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData(5000);
this.Store1.DataBind();
}
}

private object[] TestData(int count)
{
var firstNames = new string[] { "Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige" };
var lastNames = new string[] { "Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White" };
var ratings = new int[] { 1, 2, 3, 4, 5 };
var salaries = new int[] { 100, 400, 900, 1500, 1000000 };

var data = new object[count];
var rnd = new Random();

for (int i = 0; i < count; i++)
{
var ratingId = rnd.Next(ratings.Length);
var salaryId = rnd.Next(salaries.Length);
var firstNameId = rnd.Next(firstNames.Length);
var lastNameId = rnd.Next(lastNames.Length);

var rating = ratings[ratingId];
var salary = salaries[salaryId];
var name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

data[i] = new object[] { name, rating, salary };
}

return data;
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Buffered Scrolling - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" /> </head> <body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>Buffered Scrolling</h1>

<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<p>This example illustrates loading of all the records up front and buffering the rendering.</p>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Bufffered Grid of 5,000 random records"
DisableSelection="true"
Width="700"
Height="500">
<Store>
<ext:Store GroupField="rating"
ID="Store1"
runat="server"
PageSize="5000"
Buffered="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="rating" Type="Int" />
<ext:ModelField Name="salary" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" />
</View>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
<ext:Column ID="Column1" runat="server" Text="Name" Flex="1" DataIndex="name" />
<ext:SummaryColumn runat="server" Header="Rating" Width="125" DataIndex="rating" SummaryType="Count"/>
<ext:Column ID="Column3" runat="server" Text="Salary" Width="125" DataIndex="salary" Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:GroupingSummary ID="GroupingView1" runat="server"
HideGroupedHeader
="false" EnableGroupingMenu="false"
GroupHeaderTpl='Rate {[values.rows[0].data.rating]}' />
</Features>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
Apr 18, 2012, 6:55 PM
Grouping and Buffering are incompatible features.
Grouping requires all records on the client side but buffering loads records on demand

Grouping works incorrectly even with PagingToolbar



I don't see problem for my project since the group normally contains only less than 10 rows.

Because all (10) records are loaded to the store at once

If you need grouping then you have to avoid buffering

gets_gui
Apr 18, 2012, 8:45 PM
Once we disable buffering, we experience significant performance hit. Please see the attached screen-shot. Can you please advice what else we can do?

Thanks.

Vladimir
Apr 18, 2012, 8:54 PM
We cannot advice anything new.
Buffering anf grouping cannot be used in one grid. And large amount of data will decrease client side performance without buffering
You have to choose between those evils: avoid grouping or avoid buffering (and expirience performance issues)

Or try to change design: for example, use two grids. In first grid select required group and load records of that group to the second grid (with buffering)

gets_gui
Apr 18, 2012, 8:58 PM
This is not acceptable. We just have 239 rows, and no more than 10 columns on the grid. And, we didn't have this problem until we port to v2.0.

Vladimir
Apr 18, 2012, 9:21 PM
Well, 239 rows and 10 columns should not be big problem

I created small test sample (500 rows and 11 columns) and I don't see that performance warning (I tested on very slow IE6 even)
Here is my test case


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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var data = new List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i % 100,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="450"
Title="Grid"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Group">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
<ext:ModelField Name="Value4" />
<ext:ModelField Name="Value5" />
<ext:ModelField Name="Value6" />
<ext:ModelField Name="Value7" />
<ext:ModelField Name="Value8" />
<ext:ModelField Name="Value9" />
<ext:ModelField Name="Value10" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Group" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Group" DataIndex="Group" />
<ext:Column runat="server" Text="Value1" DataIndex="Value1" Flex="1" />
<ext:Column runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
<ext:Column runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
<ext:Column runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
<ext:Column runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
<ext:Column runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
<ext:Column runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
<ext:Column runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
<ext:Column runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
<ext:Column runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
/>
</Features>
</ext:GridPanel>
</form>
</body>
</html>





What exactly browser do you use? Please post your test sample
Try to update from SVN first and retest. Few days ago we updated to ExtJS 4.1 RC3, may be client side performace is increased (client side performance depends from ExtJS only)

gets_gui
Apr 19, 2012, 1:19 PM
We were using IE8, but the slowness is during databinding, in fact we have more than about 30 columns. Can you let us know if this would make a difference.

Vladimir
Apr 19, 2012, 1:29 PM
but the slowness is during databinding


Do you mean server side databinding?

gets_gui
Apr 19, 2012, 1:37 PM
We just use the example you posted in this thread, and added 20 (30 total) more columns. The time it takes the data to show up is about 12 seconds, which is about three times for the data to show up when there are only 10 columns (i.e., 4 seconds).

Yes we do databinding on the server side.

gets_gui
Apr 19, 2012, 2:06 PM
We just tested with the latest from SVN and it makes no difference at all. Do you think you can fix it on your side? It seems that the buffering would relieve the problem, however, we need both buffered view and grouped view in order to make it work for us. Any suggestion?

Vladimir
Apr 19, 2012, 2:27 PM
I think only one incorrect behaviour in v2
Grid refreshes own view twice at initial rendering (if you don't use any proxy). We will fix it soon
At this moment, i can sugest to set AutoLoad="false" for the store and call 'load' method manually

I created two test cases (one for v2 and one for v1), 500 rows and 30 columns (v2 test case contains the fix are mentioned above)
I don't see big performance degradation in v2 beside v1



we need both buffered view and grouped view in order to make it work for us.

It is impossible, conceptions of buffering (load records in parts by demand) and grouping (sort all records by group field and show records with group separation) are different therefore it cannot be used at one time

Here is my test cases

v1


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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.GetInstance().RegisterBeforeClient InitScript("window._start = new Date().getTime();");

var data = new System.Collections.Generic.List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i % 100,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i,
Value11 = "11_" + i,
Value12 = "12_" + i,
Value13 = "13_" + i,
Value14 = "14_" + i,
Value15 = "15_" + i,
Value16 = "16_" + i,
Value17 = "17_" + i,
Value18 = "18_" + i,
Value19 = "19_" + i,
Value20 = "20_" + i,
Value21 = "21_" + i,
Value22 = "22_" + i,
Value23 = "23_" + i,
Value24 = "24_" + i,
Value25 = "25_" + i,
Value26 = "26_" + i,
Value27 = "27_" + i,
Value28 = "28_" + i,
Value29 = "29_" + i,
Value30 = "30_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="450"
Title="Grid"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Group">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Group" />
<ext:RecordField Name="Value1" />
<ext:RecordField Name="Value2" />
<ext:RecordField Name="Value3" />
<ext:RecordField Name="Value4" />
<ext:RecordField Name="Value5" />
<ext:RecordField Name="Value6" />
<ext:RecordField Name="Value7" />
<ext:RecordField Name="Value8" />
<ext:RecordField Name="Value9" />
<ext:RecordField Name="Value10" />
<ext:RecordField Name="Value11" />
<ext:RecordField Name="Value12" />
<ext:RecordField Name="Value13" />
<ext:RecordField Name="Value14" />
<ext:RecordField Name="Value15" />
<ext:RecordField Name="Value16" />
<ext:RecordField Name="Value17" />
<ext:RecordField Name="Value18" />
<ext:RecordField Name="Value19" />
<ext:RecordField Name="Value20" />
<ext:RecordField Name="Value21" />
<ext:RecordField Name="Value22" />
<ext:RecordField Name="Value23" />
<ext:RecordField Name="Value24" />
<ext:RecordField Name="Value25" />
<ext:RecordField Name="Value26" />
<ext:RecordField Name="Value27" />
<ext:RecordField Name="Value28" />
<ext:RecordField Name="Value29" />
<ext:RecordField Name="Value30" />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field="Group" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Header="Group" DataIndex="Group" />
<ext:Column runat="server" Header="Value1" DataIndex="Value1" Width="30" />
<ext:Column runat="server" Header="Value2" DataIndex="Value2" Width="30" />
<ext:Column runat="server" Header="Value3" DataIndex="Value3" Width="30" />
<ext:Column runat="server" Header="Value4" DataIndex="Value4" Width="30" />
<ext:Column runat="server" Header="Value5" DataIndex="Value5" Width="30" />
<ext:Column runat="server" Header="Value6" DataIndex="Value6" Width="30" />
<ext:Column runat="server" Header="Value7" DataIndex="Value7" Width="30" />
<ext:Column runat="server" Header="Value8" DataIndex="Value8" Width="30" />
<ext:Column runat="server" Header="Value9" DataIndex="Value9" Width="30" />
<ext:Column runat="server" Header="Value10" DataIndex="Value10" Width="30" />
<ext:Column runat="server" Header="Value11" DataIndex="Value11" Width="30" />
<ext:Column runat="server" Header="Value12" DataIndex="Value12" Width="30" />
<ext:Column runat="server" Header="Value13" DataIndex="Value13" Width="30" />
<ext:Column runat="server" Header="Value14" DataIndex="Value14" Width="30" />
<ext:Column runat="server" Header="Value15" DataIndex="Value15" Width="30" />
<ext:Column runat="server" Header="Value16" DataIndex="Value16" Width="30" />
<ext:Column runat="server" Header="Value17" DataIndex="Value17" Width="30" />
<ext:Column runat="server" Header="Value18" DataIndex="Value18" Width="30" />
<ext:Column runat="server" Header="Value19" DataIndex="Value19" Width="30" />
<ext:Column runat="server" Header="Value20" DataIndex="Value20" Width="30" />
<ext:Column runat="server" Header="Value21" DataIndex="Value21" Width="30" />
<ext:Column runat="server" Header="Value22" DataIndex="Value22" Width="30" />
<ext:Column runat="server" Header="Value23" DataIndex="Value23" Width="30" />
<ext:Column runat="server" Header="Value24" DataIndex="Value24" Width="30" />
<ext:Column runat="server" Header="Value25" DataIndex="Value25" Width="30" />
<ext:Column runat="server" Header="Value26" DataIndex="Value26" Width="30" />
<ext:Column runat="server" Header="Value27" DataIndex="Value27" Width="30" />
<ext:Column runat="server" Header="Value28" DataIndex="Value28" Width="30" />
<ext:Column runat="server" Header="Value29" DataIndex="Value29" Width="30" />
<ext:Column runat="server" Header="Value30" DataIndex="Value30" Width="30" />
</Columns>
</ColumnModel>
<View>
<ext:GroupingView runat="server" HideGroupedColumn="true">
<Listeners>
<Refresh Handler="Ext.MessageBox.notify('Refresh:', (new Date().getTime() - window._start).toString());" />
</Listeners>
</ext:GroupingView>
</View>
</ext:GridPanel>
</form>
</body>
</html>





v2


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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.GetInstance().RegisterBeforeClient InitScript("window._start = new Date().getTime();");

var data = new List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i % 100,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i,
Value11 = "11_" + i,
Value12 = "12_" + i,
Value13 = "13_" + i,
Value14 = "14_" + i,
Value15 = "15_" + i,
Value16 = "16_" + i,
Value17 = "17_" + i,
Value18 = "18_" + i,
Value19 = "19_" + i,
Value20 = "20_" + i,
Value21 = "21_" + i,
Value22 = "22_" + i,
Value23 = "23_" + i,
Value24 = "24_" + i,
Value25 = "25_" + i,
Value26 = "26_" + i,
Value27 = "27_" + i,
Value28 = "28_" + i,
Value29 = "29_" + i,
Value30 = "30_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="450"
Title="Grid"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Group" AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
<ext:ModelField Name="Value4" />
<ext:ModelField Name="Value5" />
<ext:ModelField Name="Value6" />
<ext:ModelField Name="Value7" />
<ext:ModelField Name="Value8" />
<ext:ModelField Name="Value9" />
<ext:ModelField Name="Value10" />
<ext:ModelField Name="Value11" />
<ext:ModelField Name="Value12" />
<ext:ModelField Name="Value13" />
<ext:ModelField Name="Value14" />
<ext:ModelField Name="Value15" />
<ext:ModelField Name="Value16" />
<ext:ModelField Name="Value17" />
<ext:ModelField Name="Value18" />
<ext:ModelField Name="Value19" />
<ext:ModelField Name="Value20" />
<ext:ModelField Name="Value21" />
<ext:ModelField Name="Value22" />
<ext:ModelField Name="Value23" />
<ext:ModelField Name="Value24" />
<ext:ModelField Name="Value25" />
<ext:ModelField Name="Value26" />
<ext:ModelField Name="Value27" />
<ext:ModelField Name="Value28" />
<ext:ModelField Name="Value29" />
<ext:ModelField Name="Value30" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Group" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Group" DataIndex="Group" />
<ext:Column runat="server" Text="Value1" DataIndex="Value1" Flex="1" />
<ext:Column runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
<ext:Column runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
<ext:Column runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
<ext:Column runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
<ext:Column runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
<ext:Column runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
<ext:Column runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
<ext:Column runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
<ext:Column runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
<ext:Column runat="server" Text="Value11" DataIndex="Value11" Flex="1" />
<ext:Column runat="server" Text="Value12" DataIndex="Value12" Flex="1" />
<ext:Column runat="server" Text="Value13" DataIndex="Value13" Flex="1" />
<ext:Column runat="server" Text="Value14" DataIndex="Value14" Flex="1" />
<ext:Column runat="server" Text="Value15" DataIndex="Value15" Flex="1" />
<ext:Column runat="server" Text="Value16" DataIndex="Value16" Flex="1" />
<ext:Column runat="server" Text="Value17" DataIndex="Value17" Flex="1" />
<ext:Column runat="server" Text="Value18" DataIndex="Value18" Flex="1" />
<ext:Column runat="server" Text="Value19" DataIndex="Value19" Flex="1" />
<ext:Column runat="server" Text="Value20" DataIndex="Value20" Flex="1" />
<ext:Column runat="server" Text="Value21" DataIndex="Value21" Flex="1" />
<ext:Column runat="server" Text="Value22" DataIndex="Value22" Flex="1" />
<ext:Column runat="server" Text="Value23" DataIndex="Value23" Flex="1" />
<ext:Column runat="server" Text="Value24" DataIndex="Value24" Flex="1" />
<ext:Column runat="server" Text="Value25" DataIndex="Value25" Flex="1" />
<ext:Column runat="server" Text="Value26" DataIndex="Value26" Flex="1" />
<ext:Column runat="server" Text="Value27" DataIndex="Value27" Flex="1" />
<ext:Column runat="server" Text="Value28" DataIndex="Value28" Flex="1" />
<ext:Column runat="server" Text="Value29" DataIndex="Value29" Flex="1" />
<ext:Column runat="server" Text="Value30" DataIndex="Value30" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
/>
</Features>
<View>
<ext:GridView runat="server">
<Listeners>
<Refresh Handler="Ext.MessageBox.notify('Refresh:', (new Date().getTime() - window._start).toString());" />
</Listeners>
</ext:GridView>
</View>
<Listeners>
<Render Handler="this.store.load();" />
</Listeners>
</ext:GridPanel>
</form>
</body>
</html>

gets_gui
Apr 20, 2012, 8:47 PM
Just tried your example in V2, it takes really a long time to move the scrolling bar.
The performance is really bad.

Vladimir
Apr 20, 2012, 8:59 PM
And, we didn't have this problem until we port to v2.0.



Just tried your example in V2, it takes really a long time to move the scrolling bar.

I see the same performance as in v1, can you confirm that both samples (v1 and v2) have the same performance?

gets_gui
Apr 20, 2012, 9:14 PM
We are seeing a performance degradation at about 50% from v1 to v2, whereby v2 is much slower. To illustrate, we use your sample code to do the this on the same server, and v2 is definitely 50% slower to load the amount of data.

Vladimir
Apr 21, 2012, 3:46 AM
Can you post times are shown both samples?
For me, the times are comparable

Vladimir
Apr 21, 2012, 1:52 PM
Hi,

I played with Buffered option today and it seems we can combine grouping and buffering if load all records from the server at once
For better result, it is required to set PageSize option of store equals or greater then records count

Here is updated sample and it seems it works fast and grouping works correctly (however i am not sure yet that it will work correctly in all cases but i am hope)


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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.GetInstance().RegisterBeforeClient InitScript("window._start = new Date().getTime();");

var data = new List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i / 50,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i,
Value11 = "11_" + i,
Value12 = "12_" + i,
Value13 = "13_" + i,
Value14 = "14_" + i,
Value15 = "15_" + i,
Value16 = "16_" + i,
Value17 = "17_" + i,
Value18 = "18_" + i,
Value19 = "19_" + i,
Value20 = "20_" + i,
Value21 = "21_" + i,
Value22 = "22_" + i,
Value23 = "23_" + i,
Value24 = "24_" + i,
Value25 = "25_" + i,
Value26 = "26_" + i,
Value27 = "27_" + i,
Value28 = "28_" + i,
Value29 = "29_" + i,
Value30 = "30_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="450"
Title="Grid"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Group" Buffered="true" PageSize="500">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
<ext:ModelField Name="Value4" />
<ext:ModelField Name="Value5" />
<ext:ModelField Name="Value6" />
<ext:ModelField Name="Value7" />
<ext:ModelField Name="Value8" />
<ext:ModelField Name="Value9" />
<ext:ModelField Name="Value10" />
<ext:ModelField Name="Value11" />
<ext:ModelField Name="Value12" />
<ext:ModelField Name="Value13" />
<ext:ModelField Name="Value14" />
<ext:ModelField Name="Value15" />
<ext:ModelField Name="Value16" />
<ext:ModelField Name="Value17" />
<ext:ModelField Name="Value18" />
<ext:ModelField Name="Value19" />
<ext:ModelField Name="Value20" />
<ext:ModelField Name="Value21" />
<ext:ModelField Name="Value22" />
<ext:ModelField Name="Value23" />
<ext:ModelField Name="Value24" />
<ext:ModelField Name="Value25" />
<ext:ModelField Name="Value26" />
<ext:ModelField Name="Value27" />
<ext:ModelField Name="Value28" />
<ext:ModelField Name="Value29" />
<ext:ModelField Name="Value30" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Group" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Group" DataIndex="Group" />
<ext:Column runat="server" Text="Value1" DataIndex="Value1" Flex="1" />
<ext:Column runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
<ext:Column runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
<ext:Column runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
<ext:Column runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
<ext:Column runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
<ext:Column runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
<ext:Column runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
<ext:Column runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
<ext:Column runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
<ext:Column runat="server" Text="Value11" DataIndex="Value11" Flex="1" />
<ext:Column runat="server" Text="Value12" DataIndex="Value12" Flex="1" />
<ext:Column runat="server" Text="Value13" DataIndex="Value13" Flex="1" />
<ext:Column runat="server" Text="Value14" DataIndex="Value14" Flex="1" />
<ext:Column runat="server" Text="Value15" DataIndex="Value15" Flex="1" />
<ext:Column runat="server" Text="Value16" DataIndex="Value16" Flex="1" />
<ext:Column runat="server" Text="Value17" DataIndex="Value17" Flex="1" />
<ext:Column runat="server" Text="Value18" DataIndex="Value18" Flex="1" />
<ext:Column runat="server" Text="Value19" DataIndex="Value19" Flex="1" />
<ext:Column runat="server" Text="Value20" DataIndex="Value20" Flex="1" />
<ext:Column runat="server" Text="Value21" DataIndex="Value21" Flex="1" />
<ext:Column runat="server" Text="Value22" DataIndex="Value22" Flex="1" />
<ext:Column runat="server" Text="Value23" DataIndex="Value23" Flex="1" />
<ext:Column runat="server" Text="Value24" DataIndex="Value24" Flex="1" />
<ext:Column runat="server" Text="Value25" DataIndex="Value25" Flex="1" />
<ext:Column runat="server" Text="Value26" DataIndex="Value26" Flex="1" />
<ext:Column runat="server" Text="Value27" DataIndex="Value27" Flex="1" />
<ext:Column runat="server" Text="Value28" DataIndex="Value28" Flex="1" />
<ext:Column runat="server" Text="Value29" DataIndex="Value29" Flex="1" />
<ext:Column runat="server" Text="Value30" DataIndex="Value30" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:Grouping
runat="server"
HideGroupedHeader="true"
/>
</Features>
<View>
<ext:GridView runat="server" TrackOver="false" >
<Listeners>
<%--<Refresh Handler="alert((new Date().getTime() - window._start).toString());" />--%>
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>

gets_gui
Apr 23, 2012, 2:13 PM
This is back to what I had before.
http://forums.ext.net/showthread.php?18381-RemoteSort-for-buffered-store&p=79687&viewfull=1#post79687

Vladimir
Apr 23, 2012, 2:16 PM
This is back to what I had before.
http://forums.ext.net/showthread.php...ll=1#post79687 (http://forums.ext.net/showthread.php?18381-RemoteSort-for-buffered-store&p=79687&viewfull=1#post79687)

Do you see the same problem in my sample? The sample is posted has 50 records per group. Can you change the sample to reproduce the issue?

gets_gui
Apr 23, 2012, 2:29 PM
Please see the code below.
It seems a bug to me if all the data are in client side.
And it is related with group summary, for example, two people check the same page with different counts (18 vs 34, neither one is correct) for group 0.



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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.GetInstance().RegisterBeforeClient InitScript("window._start = new Date().getTime();");

var data = new List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i % 10,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i,
Value11 = "11_" + i,
Value12 = "12_" + i,
Value13 = "13_" + i,
Value14 = "14_" + i,
Value15 = "15_" + i,
Value16 = "16_" + i,
Value17 = "17_" + i,
Value18 = "18_" + i,
Value19 = "19_" + i,
Value20 = "20_" + i,
Value21 = "21_" + i,
Value22 = "22_" + i,
Value23 = "23_" + i,
Value24 = "24_" + i,
Value25 = "25_" + i,
Value26 = "26_" + i,
Value27 = "27_" + i,
Value28 = "28_" + i,
Value29 = "29_" + i,
Value30 = "30_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="600"
Height="450"
Title="Grid"
Frame="true">
<Store>
<ext:Store runat="server" GroupField="Group" Buffered="true" PageSize="500">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
<ext:ModelField Name="Value4" />
<ext:ModelField Name="Value5" />
<ext:ModelField Name="Value6" />
<ext:ModelField Name="Value7" />
<ext:ModelField Name="Value8" />
<ext:ModelField Name="Value9" />
<ext:ModelField Name="Value10" />
<ext:ModelField Name="Value11" />
<ext:ModelField Name="Value12" />
<ext:ModelField Name="Value13" />
<ext:ModelField Name="Value14" />
<ext:ModelField Name="Value15" />
<ext:ModelField Name="Value16" />
<ext:ModelField Name="Value17" />
<ext:ModelField Name="Value18" />
<ext:ModelField Name="Value19" />
<ext:ModelField Name="Value20" />
<ext:ModelField Name="Value21" />
<ext:ModelField Name="Value22" />
<ext:ModelField Name="Value23" />
<ext:ModelField Name="Value24" />
<ext:ModelField Name="Value25" />
<ext:ModelField Name="Value26" />
<ext:ModelField Name="Value27" />
<ext:ModelField Name="Value28" />
<ext:ModelField Name="Value29" />
<ext:ModelField Name="Value30" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Group" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
<ext:Column runat="server" Text="Group" DataIndex="Group" />
<ext:SummaryColumn runat="server" Text="Value1" DataIndex="Value1" SummaryType="Count" Flex="1" />
<ext:Column runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
<ext:Column runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
<ext:Column runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
<ext:Column runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
<ext:Column runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
<ext:Column runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
<ext:Column runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
<ext:Column runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
<ext:Column runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
<ext:Column runat="server" Text="Value11" DataIndex="Value11" Flex="1" />
<ext:Column runat="server" Text="Value12" DataIndex="Value12" Flex="1" />
<ext:Column runat="server" Text="Value13" DataIndex="Value13" Flex="1" />
<ext:Column runat="server" Text="Value14" DataIndex="Value14" Flex="1" />
<ext:Column runat="server" Text="Value15" DataIndex="Value15" Flex="1" />
<ext:Column runat="server" Text="Value16" DataIndex="Value16" Flex="1" />
<ext:Column runat="server" Text="Value17" DataIndex="Value17" Flex="1" />
<ext:Column runat="server" Text="Value18" DataIndex="Value18" Flex="1" />
<ext:Column runat="server" Text="Value19" DataIndex="Value19" Flex="1" />
<ext:Column runat="server" Text="Value20" DataIndex="Value20" Flex="1" />
<ext:Column runat="server" Text="Value21" DataIndex="Value21" Flex="1" />
<ext:Column runat="server" Text="Value22" DataIndex="Value22" Flex="1" />
<ext:Column runat="server" Text="Value23" DataIndex="Value23" Flex="1" />
<ext:Column runat="server" Text="Value24" DataIndex="Value24" Flex="1" />
<ext:Column runat="server" Text="Value25" DataIndex="Value25" Flex="1" />
<ext:Column runat="server" Text="Value26" DataIndex="Value26" Flex="1" />
<ext:Column runat="server" Text="Value27" DataIndex="Value27" Flex="1" />
<ext:Column runat="server" Text="Value28" DataIndex="Value28" Flex="1" />
<ext:Column runat="server" Text="Value29" DataIndex="Value29" Flex="1" />
<ext:Column runat="server" Text="Value30" DataIndex="Value30" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:GroupingSummary ID="GroupingView1" runat="server"
HideGroupedHeader
="false" EnableGroupingMenu="false"
GroupHeaderTpl='Group {[values.rows[0].data.Group]}' />
</Features>
<View>
<ext:GridView runat="server" TrackOver="false" >
<Listeners>
<%--<Refresh Handler="alert((new Date().getTime() - window._start).toString());" />--%>
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
Apr 23, 2012, 3:11 PM
Hi,

Yes, GroupingSummary cannot work correctly with Buffered store (atleast now)
At this moment, I can suggest to use remote group summary
http://examples2.ext.net/#/GridPanel/Plugins/Remote_GroupSummary/

I would consider it as a bug (because all records are presented in client side and summary is able to calculate correctly all values). We should fix the issue before final release

gets_gui
Apr 23, 2012, 3:17 PM
Sounds good.
Please let us know when the fixes are checked in SVN.

Thanks for the help.

gets_gui
Apr 30, 2012, 2:46 PM
Hi Vladimir,

I am trying to use remote groupsummary as you suggested.
And I also do the remote sorting.
So, I return something like below the Store_RefreshData for OnReadData.


clientStore.DataSource = new { data, summaryData };

I also added the following in the store.

<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data.data" />
</Reader>
</ext:PageProxy>
</Proxy>
I got the following error.
{serviceResponse:{success:false,message:"System.ArgumentException: Invalid data source source type. The data source must be of type IListSource, IEnumerable or IDataSource.\r\n at Ext.Net.StoreBase.ValidateDataSource(Object dataSource)\r\n at Ext.Net.StoreBase.set_DataSource(Object value)\r\n at ASP.views_home_index_aspx.Store_RefreshData(Object sender, StoreReadDataEventArgs e) in MvcApplication7\\Views\\Home\\Index.aspx:line 1228\r\n at Ext.Net.Store.OnReadData(StoreReadDataEventArgs e)\r\n at Ext.Net.Store.RaiseAjaxPostBackEvent(String eventArgument)"}}

Did I miss any setting or it is a bug?
Plase advise.

Vladimir
Apr 30, 2012, 2:53 PM
Hi,

You have to use Data property instead DataSource (like in Examples Explorer sample)
Difference between Data and DataSource: Data is serialized as is (whole (any) object is serialized using Json.Serialize),
DataSource property is analyzed and properties are related with fields are listed in Model.Fields collection will be serialized only

gets_gui
Apr 30, 2012, 3:12 PM
Great, it works.
Thank you for the explaination as well.

Can you please let us know what's the time line the local group summary will be fixed?
And the performance for scroll bar seems still a big problem for us.

Vladimir
Apr 30, 2012, 3:17 PM
Can you please let us know what's the time line the local group summary will be fixed?

I am not sure yet, may be 1-2 weeks



And the performance for scroll bar seems still a big problem for us.

ExtJS uses browser native scrolling therefore i am doubt that we can improve it (it is a problem on the browser level)

gets_gui
Apr 30, 2012, 3:38 PM
I am not sure yet, may be 1-2 weeks
Awesome!


ExtJS uses browser native scrolling therefore i am doubt that we can improve it (it is a problem on the browser level)
I think it is related with the buffer not the browser.
First of all, if I don't use buffer and once the data loaded, the scrolling bar movement is smoothly.
Secondly, I am not sure if you notice that the height of scroller for vertical scrolling bar is incorrect (The height is much bigger than the one without buffer, it seems calculated based only on the portional of rows the buffered instead of total rows). My page size is set to 1000 and much bigger than 300 total rows I have and I assume all the rows should be buffered in the local.

Vladimir
Apr 30, 2012, 3:43 PM
First of all, if I don't use buffer and once the data loaded, the scrolling bar movement is smoothly.

Buffered grid renders rows on demand (when scrolling is performed) therefore can be some delay (depends from browser javascript engine speed)



Secondly, I am not sure if you notice that the height of scroller for vertical scrolling bar is incorrect (The height is much bigger than the one without buffer, it seems calculated based only on the portional of rows the buffered instead of total rows). My page size is set to 1000 and much bigger than 300 total rows I have and I assume all the rows should be buffered in the local.

I am not sure that clear understood, can you provide a sample?

gets_gui
Apr 30, 2012, 4:00 PM
Buffered grid renders rows on demand (when scrolling is performed) therefore can be some delay (depends from browser javascript engine speed)
I understood, that maybe the root cause of the scrolling bar performance issue.


I am not sure that clear understood, can you provide a sample?
For example, if the window can show 50 rows and there are total 500 rows, the scroller is 1/10 the height of the scroll bar in normal scenario.
But in the buffered view, it may be 1/5 or more. I guess it is also related with the same reason above.

And I was also wondering if there is a way to make the buffer bigger (less on demand rendering) via some setting.
I tried to set the page size much bigger than the actually data amount, it makes no difference.

Vladimir
May 01, 2012, 1:34 PM
For example, if the window can show 50 rows and there are total 500 rows, the scroller is 1/10 the height of the scroll bar in normal scenario.
But in the buffered view, it may be 1/5 or more. I guess it is also related with the same reason above.

I compared grid with 200 and 500 rows, buffered and not buffered, and scroll bar was the same for buffered and not buffered version
Please provide test sample demonstrates the issue



And I was also wondering if there is a way to make the buffer bigger (less on demand rendering) via some setting.
I tried to set the page size much bigger than the actually data amount, it makes no difference.

PagingScroller options manage this behaviour (that scrolller is added to VerticalScroller collection)
Please investigate API docs
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.PagingScroller

Pleasee see section 'Infinite Scrolling' in
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

gets_gui
May 01, 2012, 2:54 PM
You can reproduce the problem as long as your panel height is bigger enough.
Please see the code below:


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


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
<title></title>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ResourceManager.GetInstance().RegisterBeforeClient InitScript("window._start = new Date().getTime();");

var data = new List<object>();


for (int i = 0; i < 500; i++)
{
data.Add(new {
Group = i % 100,
Value1 = "1_" + i,
Value2 = "2_" + i,
Value3 = "3_" + i,
Value4 = "4_" + i,
Value5 = "5_" + i,
Value6 = "6_" + i,
Value7 = "7_" + i,
Value8 = "8_" + i,
Value9 = "9_" + i,
Value10 = "10_" + i,
Value11 = "11_" + i,
Value12 = "12_" + i,
Value13 = "13_" + i,
Value14 = "14_" + i,
Value15 = "15_" + i,
Value16 = "16_" + i,
Value17 = "17_" + i,
Value18 = "18_" + i,
Value19 = "19_" + i,
Value20 = "20_" + i,
Value21 = "21_" + i,
Value22 = "22_" + i,
Value23 = "23_" + i,
Value24 = "24_" + i,
Value25 = "25_" + i,
Value26 = "26_" + i,
Value27 = "27_" + i,
Value28 = "28_" + i,
Value29 = "29_" + i,
Value30 = "30_" + i
});
}


GridPanel1.GetStore().DataSource = data;
GridPanel1.GetStore().DataBind();
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<ext:GridPanel
ID="GridPanel1"
runat="server"
Width="1024" Height="860"
Title="Grid"
>
<Store>
<ext:Store ID="Store1" runat="server" GroupField="Group" PageSize="1000" >
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Group" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
<ext:ModelField Name="Value4" />
<ext:ModelField Name="Value5" />
<ext:ModelField Name="Value6" />
<ext:ModelField Name="Value7" />
<ext:ModelField Name="Value8" />
<ext:ModelField Name="Value9" />
<ext:ModelField Name="Value10" />
<ext:ModelField Name="Value11" />
<ext:ModelField Name="Value12" />
<ext:ModelField Name="Value13" />
<ext:ModelField Name="Value14" />
<ext:ModelField Name="Value15" />
<ext:ModelField Name="Value16" />
<ext:ModelField Name="Value17" />
<ext:ModelField Name="Value18" />
<ext:ModelField Name="Value19" />
<ext:ModelField Name="Value20" />
<ext:ModelField Name="Value21" />
<ext:ModelField Name="Value22" />
<ext:ModelField Name="Value23" />
<ext:ModelField Name="Value24" />
<ext:ModelField Name="Value25" />
<ext:ModelField Name="Value26" />
<ext:ModelField Name="Value27" />
<ext:ModelField Name="Value28" />
<ext:ModelField Name="Value29" />
<ext:ModelField Name="Value30" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Group" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<VerticalScroller>
<ext:GridPagingScroller ID="GridPagingScroller1" runat="server" ActivePrefetch="false" />
</VerticalScroller>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="40" Sortable="false" />
<ext:Column ID="Column1" runat="server" Text="Group" DataIndex="Group" />
<ext:SummaryColumn ID="SummaryColumn1" runat="server" Text="Value1" DataIndex="Value1" SummaryType="Count" Flex="1" />
<ext:Column ID="Column2" runat="server" Text="Value2" DataIndex="Value2" Flex="1" />
<ext:Column ID="Column3" runat="server" Text="Value3" DataIndex="Value3" Flex="1" />
<ext:Column ID="Column4" runat="server" Text="Value4" DataIndex="Value4" Flex="1" />
<ext:Column ID="Column5" runat="server" Text="Value5" DataIndex="Value5" Flex="1" />
<ext:Column ID="Column6" runat="server" Text="Value6" DataIndex="Value6" Flex="1" />
<ext:Column ID="Column7" runat="server" Text="Value7" DataIndex="Value7" Flex="1" />
<ext:Column ID="Column8" runat="server" Text="Value8" DataIndex="Value8" Flex="1" />
<ext:Column ID="Column9" runat="server" Text="Value9" DataIndex="Value9" Flex="1" />
<ext:Column ID="Column10" runat="server" Text="Value10" DataIndex="Value10" Flex="1" />
<ext:Column ID="Column11" runat="server" Text="Value11" DataIndex="Value11" Flex="1" />
<ext:Column ID="Column12" runat="server" Text="Value12" DataIndex="Value12" Flex="1" />
<ext:Column ID="Column13" runat="server" Text="Value13" DataIndex="Value13" Flex="1" />
<ext:Column ID="Column14" runat="server" Text="Value14" DataIndex="Value14" Flex="1" />
<ext:Column ID="Column15" runat="server" Text="Value15" DataIndex="Value15" Flex="1" />
<ext:Column ID="Column16" runat="server" Text="Value16" DataIndex="Value16" Flex="1" />
<ext:Column ID="Column17" runat="server" Text="Value17" DataIndex="Value17" Flex="1" />
<ext:Column ID="Column18" runat="server" Text="Value18" DataIndex="Value18" Flex="1" />
<ext:Column ID="Column19" runat="server" Text="Value19" DataIndex="Value19" Flex="1" />
<ext:Column ID="Column20" runat="server" Text="Value20" DataIndex="Value20" Flex="1" />
<ext:Column ID="Column21" runat="server" Text="Value21" DataIndex="Value21" Flex="1" />
<ext:Column ID="Column22" runat="server" Text="Value22" DataIndex="Value22" Flex="1" />
<ext:Column ID="Column23" runat="server" Text="Value23" DataIndex="Value23" Flex="1" />
<ext:Column ID="Column24" runat="server" Text="Value24" DataIndex="Value24" Flex="1" />
<ext:Column ID="Column25" runat="server" Text="Value25" DataIndex="Value25" Flex="1" />
<ext:Column ID="Column26" runat="server" Text="Value26" DataIndex="Value26" Flex="1" />
<ext:Column ID="Column27" runat="server" Text="Value27" DataIndex="Value27" Flex="1" />
<ext:Column ID="Column28" runat="server" Text="Value28" DataIndex="Value28" Flex="1" />
<ext:Column ID="Column29" runat="server" Text="Value29" DataIndex="Value29" Flex="1" />
<ext:Column ID="Column30" runat="server" Text="Value30" DataIndex="Value30" Flex="1" />
</Columns>
</ColumnModel>
<Features>
<ext:GroupingSummary ID="GroupingView1" runat="server"
HideGroupedHeader
="false" EnableGroupingMenu="false"
GroupHeaderTpl='Group {[values.rows[0].data.Group]}' />
<ext:GridFilters runat="server" ID="GridFilters1">
<Filters>
<ext:StringFilter DataIndex='Value2' />
<ext:StringFilter DataIndex='Value3' />
<ext:StringFilter DataIndex='Value4' />
<ext:StringFilter DataIndex='Value5' />
<ext:StringFilter DataIndex='Value6' />
</Filters>
</ext:GridFilters>
</Features>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" >
<Listeners>
<%--<Refresh Handler="alert((new Date().getTime() - window._start).toString());" />--%>
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</form>
</body>
</html>

Vladimir
May 01, 2012, 3:12 PM
I don't see significant difference in scroll bar height between buffered and not buffered version.
Scrollbar height (thumb) is not regulated anywhere and if scroling works correctly (you able to scroll from top to bottom) then all ok

gets_gui
May 01, 2012, 3:31 PM
It is significant in our app.
Actually if you change the above code from Group = i % 100 to Group = i % 500 in Page_Load method, you can tell the big difference.
As you said, the scrolling is working, but it is extremely slow.
And I also tried LeadingBufferZone and TrailingBufferZone as you mentioned in previous post, it doesn't help the performance much.

Vladimir
May 01, 2012, 4:03 PM
Scrollbar is not designed to show how much height exactly. It is designed for scrolling only

In buffered case, scrolling height has approximated height because there are no all rendered elements (grid renderes part of data only), grid doesn't know how many groups will be rendered, rows can have different height and etc. Therefore grid is not able to determine exactly height

If you able to scroll from top to bottom then I don't see any issue in scroll height



As you said, the scrolling is working, but it is extremely slow.

The performance depends from browser javascript engine also. Compare Chrome and IE performance. Rows are rendered during scrolling therefore if browser javascript enegine is slow then you will observe some delay

Vladimir
May 01, 2012, 4:10 PM
If remove Grouping feature then scroll height will be the same because grid can calculate height correctly (total rows * apprx row height)
When you use grouping then grid doesn't about groups count and its height

Actually, Buffered option is not designed to work with Grouping (Sencha teams mentioned about it on own forum, and i was surprised that local buffering works with grouping)

Therefore do not expect that height of scroll will be the same for buffered and non buffered version, the main goal to scroll

Vladimir
May 27, 2012, 8:02 PM
I would consider it as a bug (because all records are presented in client side and summary is able to calculate correctly all values). We should fix the issue before final release

The fix is committed to SVN