PDA

View Full Version : [CLOSED] Question - GridPanel Render And IE9



Aurelio
Mar 17, 2012, 5:55 PM
HI,
when load a gridPanel with page of 500 record the IE9 is slow to show the record in the GridPanel, with V1.3 it's faster.
V2.0 and other browsers such as Chrome o Firefox are faster than explorer.
It 's my explorer with problem or 2.0 is slower than the 1.3 to view the records in the gridpanel ?

It 's just a question to know if you also have the same problem.

Thanks
Aurelio

Daniil
Mar 19, 2012, 6:29 AM
Hi,

Actually, IE has a much slower JavaScript engine, so, it's a common issue when something runs slower in IE than in FireFox or Chrome.

Regarding to v1.3 VS v2.0.

The first releases of ExtJS 4 were very slow in IE. Lately, the things became much better. Though we and ExtJS team are still looking into this problem.

Recently, we have update to the new ExtJS release (RC1). So, the things might go better.

Please update from SVN and re-test the problem page.

Aurelio
Mar 19, 2012, 3:39 PM
Hi, Daniil thanks for the answer, i have update the dll, but the problem has improved slightly,

IE9 the gridpanel with filtering header,for show 500 record time = 8 second from the moment in which performs the procedure
Chrome = 4 second,
This is not a problem for me, the customer will install chrome or firefox, it was just to see if the problem actually exists or was it just my problem.

Thanks for your response and the time dedicated

Aurelio

Daniil
Mar 19, 2012, 4:03 PM
IE9 the gridpanel with filtering header,for show 500 record time = 8 second from the moment in which performs the procedure
Chrome = 4 second,


Please clarify what time does it take in a respective page with Ext.NET v1?

Aurelio
Mar 19, 2012, 4:26 PM
Hi, Daniil, with the versione 1.2 it's is many many faster, the same sample:

IE9 = 2 second
Chrome = 4 second
FireFox = 2 second

Thanks

Aurelio

Vladimir
Mar 19, 2012, 5:55 PM
I suggest to use buffered grid
Please test the following sample (please ensure that you updated from svn today)


<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}


private object[] Data
{
get
{
var count = 5000;
var data = new object[count];
for (int i = 0; i < count; i++)
{
var row = new object[20];
for (int g = 0; g < row.Length; g++)
{
row[g] = "Column " + g;
}


data[i] = row;
}


return data;
}
}
</script>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager runat="server">
</ext:ResourceManager>

<h1>Simple Array Grid</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Bufffered Grid of 5,000 records"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server" Buffered="true" PageSize="5000">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="C0" />
<ext:ModelField Name="C1" />
<ext:ModelField Name="C2" />
<ext:ModelField Name="C3" />
<ext:ModelField Name="C4" />
<ext:ModelField Name="C5" />
<ext:ModelField Name="C6" />
<ext:ModelField Name="C7" />
<ext:ModelField Name="C8" />
<ext:ModelField Name="C9" />
<ext:ModelField Name="C10" />
<ext:ModelField Name="C11" />
<ext:ModelField Name="C12" />
<ext:ModelField Name="C13" />
<ext:ModelField Name="C14" />
<ext:ModelField Name="C15" />
<ext:ModelField Name="C16" />
<ext:ModelField Name="C17" />
<ext:ModelField Name="C18" />
<ext:ModelField Name="C19" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="C0" />
<ext:Column runat="server" DataIndex="C1" />
<ext:Column runat="server" DataIndex="C2" />
<ext:Column runat="server" DataIndex="C3" />
<ext:Column runat="server" DataIndex="C4" />
<ext:Column runat="server" DataIndex="C5" />
<ext:Column runat="server" DataIndex="C6" />
<ext:Column runat="server" DataIndex="C7" />
<ext:Column runat="server" DataIndex="C8" />
<ext:Column runat="server" DataIndex="C9" />
<ext:Column runat="server" DataIndex="C10" />
<ext:Column runat="server" DataIndex="C11" />
<ext:Column runat="server" DataIndex="C12" />
<ext:Column runat="server" DataIndex="C13" />
<ext:Column runat="server" DataIndex="C14" />
<ext:Column runat="server" DataIndex="C15" />
<ext:Column runat="server" DataIndex="C16" />
<ext:Column runat="server" DataIndex="C17" />
<ext:Column runat="server" DataIndex="C18" />
<ext:Column runat="server" DataIndex="C19" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

Aurelio
Mar 19, 2012, 6:28 PM
Hi, Vladimir, your example work very fast, but i have a gridpanel as this sample with header filter:

http://examples2.ext.net/#/GridPanel/MultiHeader/Filter/

and if use buffered = true the filter not work exactly.

Thanks
Aurelio

Vladimir
Mar 19, 2012, 6:41 PM
Yes, buffered grid doesn't support filtering. In this case I can suggest to perform remote filtering (filter a data on the server side and bind filtered data to the store)

Vladimir
Mar 19, 2012, 7:12 PM
I found one possible workaround for local data filterinf
MemoryProxy supports filters functions
Please see the following sample


<%@ 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)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}


private object[] Data
{
get
{
var count = 5000;
var data = new object[count];
for (int i = 0; i < count; i++)
{
var row = new object[20];
for (int g = 0; g < row.Length; g++)
{
if (g == 0)
{
row[g] = i;
}
else
{
row[g] = "Column " + g;
}
}


data[i] = row;
}


return data;
}
}
</script>


<!DOCTYPE html>


<html>
<head runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager runat="server">
</ext:ResourceManager>

<ext:Button runat="server" Text="Filter: index > 4500">
<Listeners>
<Click Handler="#{Store1}.load({filters: [{filterFn:function(r){return r.data.C0>4500;}}]});" />
</Listeners>
</ext:Button>


<ext:Button runat="server" Text="Filter: index < 2500">
<Listeners>
<Click Handler="#{Store1}.load({filters: [{filterFn:function(r){return r.data.C0<2500;}}]});" />
</Listeners>
</ext:Button>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server" Buffered="true" PageSize="5000">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="C0" Type="Int" />
<ext:ModelField Name="C1" />
<ext:ModelField Name="C2" />
<ext:ModelField Name="C3" />
<ext:ModelField Name="C4" />
<ext:ModelField Name="C5" />
<ext:ModelField Name="C6" />
<ext:ModelField Name="C7" />
<ext:ModelField Name="C8" />
<ext:ModelField Name="C9" />
<ext:ModelField Name="C10" />
<ext:ModelField Name="C11" />
<ext:ModelField Name="C12" />
<ext:ModelField Name="C13" />
<ext:ModelField Name="C14" />
<ext:ModelField Name="C15" />
<ext:ModelField Name="C16" />
<ext:ModelField Name="C17" />
<ext:ModelField Name="C18" />
<ext:ModelField Name="C19" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="C0" />
<ext:Column runat="server" DataIndex="C1" />
<ext:Column runat="server" DataIndex="C2" />
<ext:Column runat="server" DataIndex="C3" />
<ext:Column runat="server" DataIndex="C4" />
<ext:Column runat="server" DataIndex="C5" />
<ext:Column runat="server" DataIndex="C6" />
<ext:Column runat="server" DataIndex="C7" />
<ext:Column runat="server" DataIndex="C8" />
<ext:Column runat="server" DataIndex="C9" />
<ext:Column runat="server" DataIndex="C10" />
<ext:Column runat="server" DataIndex="C11" />
<ext:Column runat="server" DataIndex="C12" />
<ext:Column runat="server" DataIndex="C13" />
<ext:Column runat="server" DataIndex="C14" />
<ext:Column runat="server" DataIndex="C15" />
<ext:Column runat="server" DataIndex="C16" />
<ext:Column runat="server" DataIndex="C17" />
<ext:Column runat="server" DataIndex="C18" />
<ext:Column runat="server" DataIndex="C19" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

Aurelio
Mar 19, 2012, 9:23 PM
Hi, Vladimir this Filter work ok with you code



var applyFilter = function (field) {
var store = App.GridPanelCapComuni.getStore();
store.load({ filters: [{ filterFn: getRecordFilter()}]});

};

var clearFilter = function () {
App.ProSigFilter.reset();
App.CapComCodFilter.reset();
App.CapComComFilter.reset();
App.StoreCapComuni.load();
};

var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);

if (typeof val != "string") {
return value.length == 0;
}

return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};


var getRecordFilter = function () {
var f = [];


f.push({
filter: function (record) {
return filterString(App.CapComComFilter.getValue(), "CapComCom", record);
}
});


var len = f.length;

return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};


WIth your example, it works ok , loading and showing in 2 second,
but I found the problem of slow loading with IE9, is very slow when this gridpanel is loaded into an open window in a desktop module.
As soon as I can I create an example to see if the cause is the window on a desktop module.
For now use chome and the problem does not occur.

Thanks
Aurelio

Vladimir
Mar 19, 2012, 9:48 PM
Do you use any proxy in the store?

Aurelio
Mar 19, 2012, 10:13 PM
Hi, Vladimir, no i don't use proxy, here is the code of the store:


<ext:Store ID="StoreCapComuni" runat="server" DataSourceID="SqlDataSourceCapCom" PageSize="500" OnReadData="StoreCapComuni_ReadData" >
<Model>
<ext:Model ID="ModelCapComuni" runat="server" IDProperty="CapComId">
<Fields>
<ext:ModelField Name="CapComId" Type="Int" />
<ext:ModelField Name="CapComCod" Type="String" />
<ext:ModelField Name="CapComCom" Type="String" />
<ext:ModelField Name="ProSig" Type="String" />
<ext:ModelField Name="ProDes" />
<ext:ModelField Name="NazCodIso" />
<ext:ModelField Name="NazId" />
<ext:ModelField Name="ProId" Type="Int" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="NazCodIso" />
<ext:DataSorter Property="ProSig" />
<ext:DataSorter Property="CapComCom" />
</Sorters>
</ext:Store>


Here the GridPanel


<ext:GridPanel ID="GridPanelCapComuni" runat="server" Title="Cap - Cittą" StoreID="StoreCapComuni" >
<ColumnModel>
<Columns>
<ext:Column runat="server" ID="ProSig" DataIndex="ProSig" Align="Left" Text="Prov."
Width="50">
<HeaderItems>
<ext:TextField ID="ProSigFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="CapComCod" DataIndex="CapComCod" Align="Left" Text="Cap"
Width="70" StyleSpec="text-transform:uppercase" >
<HeaderItems>
<ext:TextField ID="CapComCodFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase" >
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="CapComCom" DataIndex="CapComCom" Align="Left" Flex="1" Text="Cittą" StyleSpec="text-transform:uppercase" >
<HeaderItems>
<ext:TextField ID="CapComComFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="ColumnClear" runat="server" Width="25" DataIndex="CapComId" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Html="Pulisci il filtro" />
</ToolTips>

<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelCapComune" Mode="Single" runat="server">
<Listeners>
<Select Handler="enableButtonRowSelect(record);" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PaginToolBarCapComuni" runat="server" DisplayInfo="true"
DisplayMsg="Cittą {0} - {1} di {2}" EmptyMsg="Nessuna cittą da visualizzare"
HideRefresh="true">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>


The problem is IE9, other browser work ok, in the V1.2 IE9 work ok but in the project 1.2 i don't use the DeskTop Module.

Thanks

Vladimir
Mar 19, 2012, 10:20 PM
I don't see Buffered option in the store, also if you use PagingToolbar then buffering is not required but you have to set small page size (aprx 50 records)

Aurelio
Mar 19, 2012, 10:40 PM
Hi, Vladimir, sorry, i posted the old code, but i don't use proxy:



<ext:GridPanel ID="GridPanelCapComuni" runat="server" Title="Cap - Cittą" Region="Center" Height="600" >
<Store>
<ext:Store ID="StoreCapComuni" runat="server" DataSourceID="SqlDataSourceCapCom" PageSize="5000" Buffered="true" >
<Model>
<ext:Model ID="ModelCapComuni" runat="server" IDProperty="CapComId">
<Fields>
<ext:ModelField Name="CapComId" />
<ext:ModelField Name="CapComCod" />
<ext:ModelField Name="CapComCom" />
<ext:ModelField Name="ProSig" />
<ext:ModelField Name="ProDes" />
<ext:ModelField Name="NazCodIso" />
<ext:ModelField Name="NazId" />
<ext:ModelField Name="ProId" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" ID="ProSig" DataIndex="ProSig" Align="Left" Text="Prov."
Width="50">
</ext:Column>
<ext:Column runat="server" ID="CapComCod" DataIndex="CapComCod" Align="Left" Text="Cap"
Width="70" StyleSpec="text-transform:uppercase" >
</ext:Column>
<ext:Column runat="server" ID="CapComCom" DataIndex="CapComCom" Align="Left" Flex="1" Text="Cittą" StyleSpec="text-transform:uppercase" >
<HeaderItems>
<ext:TextField ID="CapComComFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="ColumnClear" runat="server" Width="25" DataIndex="CapComId" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />

</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false" />
</View>


</ext:GridPanel>


I'm writing a test example with desktop module and gridpanel for testing IE9, Wednesday I hope to post it..

Thanks

Aurelio
Mar 22, 2012, 12:23 PM
HI,
after some tests the cause of the slowdown to show data in IE9 appears when use in the store the property PageSize and PagingToolbar, in version 1.3 had no problems.

With PageSize and Buffered, it's work ok, but with this method I have to review the sort and filters for gridPanel.

For now I solved using other browsers, for my clients is not a problem to install firefox or chrome.

Thanks for all the answers, in the future if the problem is fixed it will reuse IE.

Aurelio

Daniil
Mar 22, 2012, 1:32 PM
We still have no sample to reproduce the initial issue.

We would glad to investigate further if we'd have a sample to reproduce the problem.

Aurelio
Mar 22, 2012, 2:28 PM
HI, Daniil...where it the sample:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ARWebRevolution.WebForm1" %>

<%@ 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>
<head id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>

<h1>Simple Array Grid</h1>
<Store>
<ext:Store ID="Store1" runat="server" PageSize="500">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="nome" />
<ext:ModelField Name="rata" />
<ext:ModelField Name="costo" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ext:GridPanel ID="GridPanelCapComuni" runat="server" Title="Cap - Cittą" StoreID="Store1" >
<ColumnModel>
<Columns>
<ext:Column runat="server" ID="nome" DataIndex="nome" Align="Left" Text="nome"
Flex="1">
<HeaderItems>
<ext:TextField ID="ProSigFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase">
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="rata" DataIndex="rata" Align="Left" Text="rata"
Width="70" >
<HeaderItems>
<ext:TextField ID="CapComCodFilter" runat="server" EnableKeyEvents="true" >
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="costo" DataIndex="costo" Align="Left" Flex="1" Text="costo" >
<HeaderItems>
<ext:TextField ID="CapComComFilter" runat="server" EnableKeyEvents="true" >
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="ColumnClear" runat="server" Width="25" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelCapComune" Mode="Single" runat="server">

</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PaginToolBarCapComuni" runat="server" DisplayInfo="true"
DisplayMsg="Cittą {0} - {1} di {2}" EmptyMsg="Nessuna cittą da visualizzare"
HideRefresh="true">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</body>
</html>





protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{

this.Store1.DataSource = TestData(5000);
this.Store1.DataBind();
}
}



private static List<Employee> 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 List<Employee>();
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]);
var rowEmp = new Employee{nome = name,rata = rating,costo = salary};
data.Add(rowEmp);

}

return data;
}

public class Employee
{
public string nome { get; set; }
public int rata { get; set; }
public int costo { get; set; }
}


My IE9 to show the resul in the gridpanel take 8-11 second
Chrome 4 second..

Thanks

Daniil
Mar 27, 2012, 10:30 AM
Thanks for the example.

Confirmed, the same example in Ext.NET v1 works much faster. We are investigating further.

Daniil
Mar 27, 2012, 2:52 PM
Confirmed, the same example in Ext.NET v1 works much faster. We are investigating further.

Well, it's about client side rendering, i.e. ExtJS and browser parts. Repeat myself, this is a known ExtJS 4 issue. Hope the ExtJS team will make it better.

A single solution for now - decreasing PageSize. Generally, 500 is too many per page.

Regarding to a server part. I've tested how much time .DataBind() takes:


this.Store1.DataSource = TestData(5000);

int start = DateTime.Now.Millisecond;
this.Store1.DataBind();
int delay = DateTime.Now.Millisecond - start;

X.Msg.Alert("Delay", delay + " ms").Show();

Here are the results:
v2: < 200 ms
v2 in VS debug mode: < 300 ms

v1: < 200 ms
v1 in VS debug mode: < 300 ms

So, they are the same in v1 and v2.

Aurelio
Mar 27, 2012, 8:43 PM
Hi, Daniil thanks for the test and the report,
In fact the problem is client side, because with chrome is ok, we will see in future versions if IE will do an update even if I do not think a big problem for me, for now will use other browsers.

Thanks
Aurelio

Daniil
Mar 28, 2012, 8:47 AM
Ok, I will review the thread in the future after the next ExtJS release.

Daniil
May 01, 2012, 3:12 PM
HI, Daniil...where it the sample:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ARWebRevolution.WebForm1" %>

<%@ 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>
<head id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>

<h1>Simple Array Grid</h1>
<Store>
<ext:Store ID="Store1" runat="server" PageSize="500">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="nome" />
<ext:ModelField Name="rata" />
<ext:ModelField Name="costo" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ext:GridPanel ID="GridPanelCapComuni" runat="server" Title="Cap - Cittą" StoreID="Store1" >
<ColumnModel>
<Columns>
<ext:Column runat="server" ID="nome" DataIndex="nome" Align="Left" Text="nome"
Flex="1">
<HeaderItems>
<ext:TextField ID="ProSigFilter" runat="server" EnableKeyEvents="true" FieldCls="txtUpperCase">
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="rata" DataIndex="rata" Align="Left" Text="rata"
Width="70" >
<HeaderItems>
<ext:TextField ID="CapComCodFilter" runat="server" EnableKeyEvents="true" >
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column runat="server" ID="costo" DataIndex="costo" Align="Left" Flex="1" Text="costo" >
<HeaderItems>
<ext:TextField ID="CapComComFilter" runat="server" EnableKeyEvents="true" >
</ext:TextField>
</HeaderItems>
</ext:Column>
<ext:Column ID="ColumnClear" runat="server" Width="25" Sortable="false" MenuDisabled="true" Text="&nbsp;" Fixed="true">
<Renderer Handler="return '';" />
<HeaderItems>
<ext:Container ID="Container1" runat="server">
<Items>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
</ext:Button>
</Items>
</ext:Container>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelCapComune" Mode="Single" runat="server">

</ext:RowSelectionModel>
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PaginToolBarCapComuni" runat="server" DisplayInfo="true"
DisplayMsg="Cittą {0} - {1} di {2}" EmptyMsg="Nessuna cittą da visualizzare"
HideRefresh="true">
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</body>
</html>





protected void Page_Load(object sender, EventArgs e)
{
if (!ExtNet.IsAjaxRequest)
{

this.Store1.DataSource = TestData(5000);
this.Store1.DataBind();
}
}



private static List<Employee> 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 List<Employee>();
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]);
var rowEmp = new Employee{nome = name,rata = rating,costo = salary};
data.Add(rowEmp);

}

return data;
}

public class Employee
{
public string nome { get; set; }
public int rata { get; set; }
public int costo { get; set; }
}


My IE9 to show the resul in the gridpanel take 8-11 second
Chrome 4 second..


Recently, we have upgraded to ExtJS 4.1.0 final.

And, the main thing - we have added a fix when a grid is refreshed twice initially.

The situation seems to become much better.

I've tested your example and the results are:

IE9: 5-8 seconds
FireFox 12: 3-5 seconds
Chrome 18: 1-3 seconds

Tested on Windows 7 Home Premium.

P.S. Chrome rocks!:)

Aurelio
May 01, 2012, 3:59 PM
Hi, Daniil, i have test now, it's is very very many fast of the previuos version..i test on a W7 Ultimate and the result is equal to your
now the result on ie is acceptable , but chrome is the best choice for using ext.net

IE9: 5-8 seconds
FireFox 12: 3-5 seconds
Chrome 18: 1-3 seconds

Many Thanks

Aurelio

Daniil
May 01, 2012, 4:03 PM
but chrome is the best choice for using ext.net

It appears to be the best choice not for Ext.NET only:) I always notice it works much faster than the others.

rcaunt
May 01, 2012, 5:24 PM
PM
Daniil,

Does the current SVN version use 4.1 ?

Thanks,
Richard

Daniil
May 01, 2012, 5:25 PM
Hi,

Yes, it uses ExtJS 4.1.0 final now.