PDA

View Full Version : [CLOSED] Performance comparison between Ext.NET 1 and 2



softmachine2011
Oct 03, 2012, 4:35 PM
Hi,

We are conducting performance tests between version 1.x and 2.x of Ext.NET.

We have found that, for the same request to our REST API to load Store, Ext.NET 2.x takes about 500ms more.

The amount of data is not significant, around 5 records, with 5 fields.

This store is linked to a GridPanel, showing the results.

The store is loaded by autoload = true

And there is no other event running.

It happens in all browsers, but is more noticeable in IE9.

Any idea or trick to load more faster?

Thanks,

Vladimir
Oct 03, 2012, 4:48 PM
I am not sure that understood the problem.
500 ms is request execution? If yes then request execution depends from network and server side request handling. Client side doesn't affect on request execution

Or 500 ms includes reponse parsing?
Unfortunately, I cannot provide any assistance because you did not provide information what and how do you measure, also you did not provide test case

softmachine2011
Oct 04, 2012, 10:27 AM
Hi,

We have detect a general time overhead problem in our application between 1.x and 2.x Ext.NET versions.

There are significant time differences in Store control, but these differences also occur throughout all view painting process.

We have repeatedly run our test cases with our both 1.x and 2.x applications, using the same scenario conditions (same database, same virtual machine, same IE client, ...), and we always experience a decrease in performance with the new version.

We are trying to build now two sample applications in order to show you this issue and send them to you in some way.

Regards.

Vladimir
Oct 04, 2012, 10:34 AM
Well, new versions can have decreased performance because additional functionality is added
Just need to know what time difference and on which code
You said that 500 ms in v2? What time for v1?
What store functionality do you measure?

softmachine2011
Oct 05, 2012, 7:40 AM
Hi Vladimir,

I've uploaded two sample projects to company's ftp.

The username and password you send it by private message to Daniil (You have disabled private messages).

Regards,

geoffrey.mcgill
Oct 05, 2012, 8:23 AM
Please post your sample here, in the forums. Please wrap your code sample in [CODE] tags.

softmachine2011
Oct 05, 2012, 9:40 AM
Ok,

I'll post the two tests in two posts.

The test consists of opening a detail and load a grid in a tab, which is loaded by a partial view result.

softmachine2011
Oct 05, 2012, 9:54 AM
Ext.NET 1.x

BaseMasterPage.Master



<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/resources/css/ui.css" />
<ext:ResourcePlaceHolder runat="server" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<ext:ResourceManager ID="resManager" runat="server" IDMode="Explicit"
ViewStateMode="Disabled" GZip="true" InitScriptMode="Inline" />

<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>


Index.aspx



<%@ Page Language="C#" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Viewport runat="server" Layout="HBoxLayout">
<Content>
<script type="text/javascript">
Ext.ns("Framework");

top.Framework = {
resolveUrl: function ResolveUrl(url) {
var appPath = '<%= Request.ApplicationPath %>';
if (appPath == "/")
return url;
else
return '<%= Request.ApplicationPath %>' + url;
},
openWindow: function () {
top.Trace = new Array();
top.Trace['StartOpenDetail'] = new Date();

var w = new Ext.Window({
renderTo: Ext.getBody(),
title: 'Details Window',
frame: true,
modal: false,
isModal: false,
resizable: true,
maximizable: true,
minimizable: true,
draggable: true,
width: 800,
height: 600,
autoLoad: {
maskMsg: 'Loading...',
showMask: true,
mode: 'iframe',
url: top.Framework.resolveUrl('/Sample/Sample/Details')
}
});
w.show();
},
showTrace: function () {
var strReturn = '';

var lastProperty = null;

top.Trace.sort();

for (var property in top.Trace) {
if (!(property == 'indexOf' || property == 'remove')) {
if (Ext.isEmpty(lastProperty))
strReturn = strReturn + property.toString() + ' -> ' + top.Trace[property].dateFormat('H:i:s.u') + '<br/>';
else {
var offset = top.Trace[property] - top.Trace[lastProperty];
strReturn = strReturn + property.toString() + ' -> ' + top.Trace[property].dateFormat('H:i:s.u') + ' (+' + offset + 'ms) <br/>';
}
lastProperty = property;
}
}

var offsetTotal = top.Trace.StopStore - top.Trace.StartOpenDetail;
strReturn = strReturn + '<u>Total:</u> <b>' + offsetTotal + 'ms</b>';

Ext.Msg.show({
title: 'Trace',
msg: strReturn,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
});
}
};
</script>
</Content>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center">
</ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button runat="server" Text="Open Detail">
<Listeners>
<Click Handler="top.Framework.openWindow();" />
</Listeners>
</ext:Button>
</Items>
</ext:Viewport>
</asp:Content>



Details.aspx



<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<Presentation.Web.MVC.Client.Areas.Sample.ViewModel s.VMSample>>"
MasterPageFile="~/Views/Shared/BaseMasterPage.Master" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.dsDetails.DataBind();
}
</script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Store ID="dsDetails" runat="server" ShowWarningOnFailure="false" DataSource="<%# ((List<Presentation.Web.MVC.Client.Areas.Sample.ViewModel s.VMSample>)Model).ToList() %>">
<Reader>
<ext:JsonReader IDProperty="SampleId">
<Fields>
<ext:RecordField Name="SampleId" Type="Int" SortDir="ASC" />
<ext:RecordField Name="PropertyName" Type="String" />
<ext:RecordField Name="Data1" Type="String" />
<ext:RecordField Name="Data2" Type="String" />
<ext:RecordField Name="Data3" Type="String" />
<ext:RecordField Name="Data4" Type="String" />
<ext:RecordField Name="Data5" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Load Handler="DetailsForm.form.loadRecord(records[0]);" Delay="10" />
</Listeners>
</ext:Store>
<ext:Viewport runat="server" MonitorResize="true">
<Items>
<ext:BorderLayout ID="BorderLayoutMain" runat="server">
<North>
<ext:Panel runat="server" Height="55">
<TopBar>
<ext:Toolbar ID="MenuBar" runat="server">
<Items>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Add">
<ToolTips>
<ext:ToolTip runat="server" Html="Tooltip" />
</ToolTips>
</ext:MenuItem>
<ext:MenuItem Text="Text" Icon="Add" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="Disk" />
<ext:MenuItem Text="Text" Icon="Delete" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="DoorIn" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Exclamation" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Reload" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="PageFind" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="CalendarViewWeek" />
<ext:MenuItem Text="Text" Icon="CalendarStar" />
<ext:MenuItem Text="Text" Icon="CalendarViewDay" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Toolbar ID="TopBar" runat="server">
<Items>
<ext:SplitButton runat="server" Icon="Add" ToolTip="Tooltip">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Text" Icon="Add" />
<ext:MenuItem Text="Text" Icon="Add" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Icon="Disk" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="Delete" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="PageFind" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="CalendarViewWeek" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarStar" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarViewDay" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="DoorIn" ToolTip="Tooltip" />
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
</North>
<Center>
<ext:Panel runat="server">
<Items>
<ext:BorderLayout runat="server">
<North>
<ext:FormPanel ID="DetailsForm" runat="server" Url='<%# Url.Action("Save") %>' Border="false"
LabelSeparator=":" LabelAlign="Top" AutoDataBind="true" LabelWidth="110" TrackResetOnLoad="true"
Frame="true" AutoHeight="true">
<Items>
<ext:Panel runat="server" Layout="HBox" Border="false" LabelAlign="Top" Title="Title"
BodyCssClass="panelBody">
<Defaults>
<ext:Parameter Name="margins" Value="0 0 0 5" Mode="Value" />
</Defaults>
<Items>
<ext:Container runat="server" ItemCls="required" Layout="Form">
<Items>
<ext:TextField ID="SampleId" runat="server" FieldLabel="SampleId" MaxLength="20"
AllowBlank="false" Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" ItemCls="required" Layout="Form">
<Items>
<ext:TextField ID="PropertyName" runat="server" FieldLabel="PropertyName" MaxLength="20"
AllowBlank="false" Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="Form">
<Items>
<ext:TextField ID="Data1" runat="server" FieldLabel="Data1" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="Form">
<Items>
<ext:TextField ID="Data2" runat="server" FieldLabel="Data2" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="Form">
<Items>
<ext:TextField ID="Data3" runat="server" FieldLabel="Data3" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="Form">
<Items>
<ext:TextField ID="Data4" runat="server" FieldLabel="Data4" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:Container>
<ext:Container runat="server" Layout="Form">
<Items>
<ext:TextField ID="Data5" runat="server" FieldLabel="Data5" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:FormPanel>
</North>
<Center>
<ext:TabPanel ID="mainTabPanel" runat="server" Border="false">
<Items>
<ext:Panel ID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
<AutoLoad Url="/ExtNET1/Sample/Sample/Tab" ShowMask="true" MaskMsg="Loading Tab...">
<Params>
<ext:Parameter Name="containerId" Value="#{tab1}" Mode="Value" />
</Params>
</AutoLoad>
<Listeners>
<BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
</Listeners>
</ext:Panel>
</Items>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Items>
</ext:Panel>
</Center>
<South>
<ext:PagingToolbar runat="server" StoreID="dsDetails" />
</South>
</ext:BorderLayout>
</Items>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenDetail'] = new Date();" />
</Listeners>
</ext:Viewport>
</asp:Content>


Tab.ascx



<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:GridPanel runat="server" Height="500" Layout="HBoxLayout" AutoScroll="true">
<Store>
<ext:Store runat="server" AutoLoad="true" ShowWarningOnFailure="false" WarningOnDirty="false"
RemoteSort="false" TabIndex="-1">
<Proxy>
<ext:HttpProxy Url='/ExtNET1/Sample/Sample/List' Method="POST" />
</Proxy>
<SortInfo Field="SampleId" Direction="ASC" />
<Reader>
<ext:JsonReader IDProperty="SampleId" Root="data" TotalProperty="totalCount">
<Fields>
<ext:RecordField Name="SampleId" Type="Int" />
<ext:RecordField Name="PropertyName" Type="String" />
<ext:RecordField Name="Data1" Type="String" />
<ext:RecordField Name="Data2" Type="String" />
<ext:RecordField Name="Data3" Type="String" />
<ext:RecordField Name="Data4" Type="String" />
<ext:RecordField Name="Data5" Type="String" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<BeforeLoad Handler="top.Trace['StartStore'] = new Date();" />
<Load Handler="top.Trace['StopStore'] = new Date(); top.Framework.showTrace();" Delay="10" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="SampleId" Header="SampleId">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="PropertyName" Header="PropertyName">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data1" Header="Data1" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data2" Header="Data2" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data3" Header="Data3" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data4" Header="Data4" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data5" Header="Data5" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView MarkDirty="false" EnableRowBody="true" TabIndex="-1" />
</View>
<SelectionModel>
<ext:RowSelectionModel Mode="Single" runat="server" />
</SelectionModel>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenTab'] = new Date();" />
</Listeners>
</ext:GridPanel>


SampleController.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Presentation.Web.MVC.Client.Areas.Sample.ViewModel s;
using Ext.Net.MVC;

namespace Presentation.Web.MVC.Client.Areas.Sample.Controlle rs
{
public class SampleController : Controller
{
public ActionResult Details()
{
var entity = new VMSample
{
SampleId = 0,
PropertyName = "Sample Details Window Text",
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
};
var list = new List<VMSample>();
list.Add(entity);
return View("Details", list);
}

public ActionResult Tab(string containerId)
{
return new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
}

public ActionResult List()
{
var listVMSample = new List<VMSample>();
for (var i = 1; i < 100; i++)
{
listVMSample.Add(new VMSample
{
SampleId = i,
PropertyName = "Item " + i.ToString(),
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
});

}

return new AjaxStoreResult(listVMSample, listVMSample.Count);
}
}
}


VMSample.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Presentation.Web.MVC.Client.Areas.Sample.ViewModel s
{
public class VMSample
{
public int SampleId { get; set; }
public string PropertyName { get; set; }
public string Data1 { get; set; }
public string Data2 { get; set; }
public string Data3 { get; set; }
public string Data4 { get; set; }
public string Data5 { get; set; }
}
}

softmachine2011
Oct 05, 2012, 9:59 AM
Ext.NET 2.x

BaseMasterPage.Master



<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/resources/css/ui.css" />
<ext:ResourcePlaceHolder runat="server" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<%--<ext:ResourceManager ID="resManager" runat="server" ViewStateMode="Disabled" IDMode="Static" InitScriptMode="Inline" Namespace="" />--%>
<ext:ResourceManager ID="resManager" runat="server" ViewStateMode="Disabled" InitScriptMode="Inline" />
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</body>
</html>


Index.aspx



<%@ Page Language="C#" MasterPageFile="~/Views/Shared/BaseMasterPage.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
Ext.ns("Framework");

top.Framework = {
resolveUrl: function ResolveUrl(url) {
var appPath = '<%= Request.ApplicationPath %>';
if (appPath == "/")
return url;
else
return '<%= Request.ApplicationPath %>' + url;
},
openWindow: function () {
top.Trace = new Array();
top.Trace['StartOpenDetail'] = new Date();

var w = new Ext.Window({
renderTo: Ext.getBody(),
title: 'Details Window',
frame: true,
modal: false,
isModal: false,
resizable: true,
maximizable: true,
minimizable: true,
draggable: true,
width: 800,
height: 600,
loader: {
url: top.Framework.resolveUrl('/Sample/Sample/Details'),
renderer: 'frame',
disableCaching: true,
loadMask: {
showMask: true,
msg: 'Loading...'
}
}
});
w.show();
},
showTrace: function () {
var strReturn = '';

var lastProperty = null;

top.Trace.sort();

for (var property in top.Trace) {
if (Ext.isEmpty(lastProperty))
strReturn = strReturn + property.toString() + ' -> ' + Ext.Date.format(top.Trace[property], 'H:i:s.u') + '<br/>';
else {
var offset = top.Trace[property] - top.Trace[lastProperty];
strReturn = strReturn + property.toString() + ' -> ' + Ext.Date.format(top.Trace[property], 'H:i:s.u') + ' (+' + offset + 'ms) <br/>';
}
lastProperty = property;
}

var offsetTotal = top.Trace.StopStore - top.Trace.StartOpenDetail;
strReturn = strReturn + '<u>Total:</u> <b>' + offsetTotal + 'ms</b>';

Ext.Msg.show({
title: 'Trace',
msg: strReturn,
buttons: Ext.Msg.OK,
icon: Ext.Msg.INFO
});
}
};
</script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Viewport runat="server" Layout="HBoxLayout">
<Content>
</Content>
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center">
</ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button runat="server" Text="Open Detail">
<Listeners>
<Click Handler="top.Framework.openWindow();" />
</Listeners>
</ext:Button>
</Items>
</ext:Viewport>
</asp:Content>


Details.aspx



<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<Presentation.Web.MVC.Client.Areas.Sample.ViewModel s.VMSample>>"
MasterPageFile="~/Views/Shared/BaseMasterPage.Master" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">
Sample Project - Details
</asp:Content>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.dsDetails.DataBind();
}
</script>
</asp:Content>
<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" runat="server">
<ext:Viewport runat="server" Layout="FitLayout">
<Bin>
<ext:Store ID="dsDetails" runat="server" ShowWarningOnFailure="false" DataSource="<%# ((List<Presentation.Web.MVC.Client.Areas.Sample.ViewModel s.VMSample>)Model).ToList() %>">
<Model>
<ext:Model runat="server" IDProperty="SampleId">
<Fields>
<ext:ModelField Name="SampleId" Type="Int" SortDir="ASC" />
<ext:ModelField Name="PropertyName" Type="String" />
<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" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="App.DetailsForm.form.loadRecord(records[0]);"
Delay="10" />
</Listeners>
</ext:Store>
</Bin>
<Items>
<ext:Panel ID="BorderLayoutMain" runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Height="55">
<TopBar>
<ext:Toolbar ID="MenuBar" runat="server">
<Items>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Add">
<ToolTips>
<ext:ToolTip runat="server" Html="Tooltip" />
</ToolTips>
</ext:MenuItem>
<ext:MenuItem Text="Text" Icon="Add" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="Disk" />
<ext:MenuItem Text="Text" Icon="Delete" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="DoorIn" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Exclamation" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="Reload" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" Icon="PageFind" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" Icon="CalendarViewWeek" />
<ext:MenuItem Text="Text" Icon="CalendarStar" />
<ext:MenuItem Text="Text" Icon="CalendarViewDay" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Text">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Text" />
<ext:MenuSeparator />
<ext:MenuItem Text="Text" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Toolbar ID="TopBar" runat="server">
<Items>
<ext:SplitButton runat="server" Icon="Add" ToolTip="Tooltip">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Text" Icon="Add" />
<ext:MenuItem Text="Text" Icon="Add" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Icon="Disk" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="Delete" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="PageFind" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="CalendarViewWeek" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarStar" ToolTip="Tooltip" />
<ext:Button runat="server" Icon="CalendarViewDay" ToolTip="Tooltip" />
<ext:ToolbarSeparator />
<ext:Button runat="server" Icon="DoorIn" ToolTip="Tooltip" />
</Items>
</ext:Toolbar>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center" Layout="BorderLayout">
<Items>
<ext:FormPanel ID="DetailsForm" runat="server" Url='<%# Url.Action("Save") %>' Border="false"
LabelSeparator=":" LabelAlign="Top" AutoDataBind="true" LabelWidth="110" TrackResetOnLoad="true"
Frame="true" Region="North" Height="75" Layout="HBoxLayout" IDMode="Static">
<Defaults>
<ext:Parameter Name="labelAlign" Value="top" Mode="Value" />
<ext:Parameter Name="margins" Value="5" Mode="Raw" />
</Defaults>
<Items>
<ext:TextField ID="SampleId" runat="server" FieldLabel="SampleId" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ID="PropertyName" runat="server" FieldLabel="PropertyName" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ID="Data1" runat="server" FieldLabel="Data1" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data2" runat="server" FieldLabel="Data2" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data3" runat="server" FieldLabel="Data3" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data4" runat="server" FieldLabel="Data4" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ID="Data5" runat="server" FieldLabel="Data5" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:FormPanel>
<ext:TabPanel ID="mainTabPanel" runat="server" Border="false" Region="Center" DeferredRender="false">
<Items>
<ext:Panel ID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
<Loader runat="server" ID="loaderTab1" Url="/ExtNET2/Sample/Sample/Tab" Mode="Script" Scripts="false" TriggerEvent="activate" Namespace="" IDMode="Static">
<LoadMask ShowMask="true" Msg="Loading Tab..." UseMsg="true" />
<Params>
<ext:Parameter Name="containerId" Value="#{tab1}" Mode="Value" />
</Params>
</Loader>
<Listeners>
<BeforeRender Handler="top.Trace['StartOpenTab'] = new Date();" />
</Listeners>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Panel>
<ext:PagingToolbar runat="server" StoreID="dsDetails" Region="South" />
</Items>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenDetail'] = new Date();" />
</Listeners>
</ext:Viewport>
</asp:Content>


Tab.ascx



<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel runat="server" Layout="BorderLayout">
<Items>
<ext:GridPanel runat="server" Height="500" Region="Center" AutoScroll="true">
<Store>
<ext:Store runat="server" AutoLoad="true" ShowWarningOnFailure="false" WarningOnDirty="false"
RemoteSort="false" TabIndex="-1">
<Proxy>
<ext:AjaxProxy Url='/ExtNET2/Sample/Sample/List'>
<Reader>
<ext:JsonReader IDProperty="SampleId" Root="data" TotalProperty="totalCount" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="SampleId" Root="data" TotalProperty="totalCount">
<Fields>
<ext:ModelField Name="SampleId" Type="Int" />
<ext:ModelField Name="PropertyName" Type="String" />
<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" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="FechaInicioAnotacionAgenda" Direction="DESC" />
</Sorters>
<Listeners>
<BeforeLoad Handler="top.Trace['StartStore'] = new Date();" />
<Load Handler="top.Trace['StopStore'] = new Date(); top.Framework.showTrace();" Delay="10" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="SampleId" Text="SampleId">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="PropertyName" Text="PropertyName">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data1" Text="Data1" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data2" Text="Data2" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data3" Text="Data3" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data4" Text="Data4" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:Column runat="server" DataIndex="Data5" Text="Data5" Width="75">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" MarkDirty="false" TrackOver="true" StripeRows="true"
LoadMask="false" LoadingUseMsg="false" TabIndex="-1" />
</View>
<SelectionModel>
<ext:RowSelectionModel Mode="Single" runat="server" />
</SelectionModel>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenTab'] = new Date();" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>


SampleController.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Presentation.Web.MVC.Client.Areas.Sample.ViewModel s;
using Ext.Net.MVC;

namespace Presentation.Web.MVC.Client.Areas.Sample.Controlle rs
{
public class SampleController : Controller
{
public ActionResult Details()
{
var entity = new VMSample
{
SampleId = 0,
PropertyName = "Sample Details Window Text",
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
};
var list = new List<VMSample>();
list.Add(entity);
return View("Details", list);
}

public ActionResult Tab(string containerId)
{
var partialViewResult = new Ext.Net.MVC.PartialViewResult(containerId, Ext.Net.RenderMode.AddTo);
partialViewResult.WrapByScriptTag = false;
partialViewResult.SingleControl = true;

return partialViewResult;
}

public ActionResult List()
{
var listVMSample = new List<VMSample>();
for (var i = 1; i < 100; i++)
{
listVMSample.Add(new VMSample
{
SampleId = i,
PropertyName = "Item " + i.ToString(),
Data1 = Guid.NewGuid().ToString(),
Data2 = Guid.NewGuid().ToString(),
Data3 = Guid.NewGuid().ToString(),
Data4 = Guid.NewGuid().ToString(),
Data5 = Guid.NewGuid().ToString()
});

}

return new StoreResult(listVMSample, listVMSample.Count);
}
}
}


VMSample.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Presentation.Web.MVC.Client.Areas.Sample.ViewModel s
{
public class VMSample
{
public int SampleId { get; set; }
public string PropertyName { get; set; }
public string Data1 { get; set; }
public string Data2 { get; set; }
public string Data3 { get; set; }
public string Data4 { get; set; }
public string Data5 { get; set; }
}
}

softmachine2011
Oct 05, 2012, 11:15 AM
Hi,

I think it would be good to change the title of the post about something like this:

Performance comparison between Ext.NET 1 and 2

Thanks,

Daniil
Oct 05, 2012, 3:01 PM
I think it would be good to change the title of the post about something like this:

Performance comparison between Ext.NET 1 and 2


Done.

Thank you for the samples. I was able to run the Ext.NET v1 sample.

Please clarify a testing object. Is it the time from clicking the "Open Detail" Button to hiding the loading mask on the Window?

Daniil
Oct 05, 2012, 3:21 PM
Please clarify a testing object. Is it the time from clicking the "Open Detail" Button to hiding the loading mask on the Window?

Please forget. I corrected the paths and now I see the required alert box.

Vladimir
Oct 05, 2012, 3:55 PM
Thanks you for samples.
Now I see what you meant
Initially, I thought that you measure server side response for data handling

Now I see that you measure UI plus server side reponse
Yes, client side performace is not good under IE in ExtJS 4.1
You can find many threads about it on Sencha forum, for example
http://www.sencha.com/forum/showthread.php?131618-4.x-Serious-performance-issues-under-IE-8
http://www.sencha.com/forum/showthread.php?152386

We cannot improve client side performance because it is ExtJS core issue (it is systemic ExtJS problem)
As I know, ExtJS team promised to improve performance in 4.2 version
So, the single thing which we can do it is waiting 4.2 release

Or need to redesing an application:
- do not use iframes: iframe is very hard for a browser. Browser loads and duplicates ExtJS resources for each iframe (time and memory resources are wasted). Ext.Net v2 supports wide functionality for dynamic rendering. Any part of UI can be rendered dynamically. Expecially under MVC, I don't see any reason to use iframe because the logic (in any way) is not related with view (moved to the controller).
- Render most of UI on demand only (for example, when container is shown)
- Load only required data to a store. it is not required to load thousands records at once. Use remote paging/sorting/filtering and load data for current grid page only

softmachine2011
Oct 09, 2012, 9:09 AM
Ok, follow the recommendations carefully.

Please mark this thread as Closed when you want.