PDA

View Full Version : [CLOSED] iFrame load alternative?



softmachine2011
Oct 08, 2012, 9:56 AM
Hi,

Following the comments of the following post:

Performance comparison between Ext.NET 1 and 2 (http://forums.ext.net/showthread.php?21324-Performance-comparison-between-Ext-NET-1-and-2&p=92367&viewfull=1#post92367)

In our application, we use iframes to render content in windows and tabs.

And we need to open multiple windows in detail, with the same components drawn.

It is said that, alternatively, use the dynamic load.

Could you post an example?

Thanks,

softmachine2011
Oct 08, 2012, 10:28 AM
Hi,

Here are some samples of how we use frames in our application. What would be the best way to perform these operations in each case?

Dynamic Windows:


openWindow: function () {
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();
}


Tabs:


tab = tp.add({
id: tabId,
title: config.title,
iconCls: config.icon || "icon-applicationdouble",
onBeforeCloseTab: config.onBeforeCloseTab ? config.onBeforeCloseTab : null,
anyDetailOpened: false,
closable: true,
closeAction: 'close',
loader: {
url: config.url,
renderer: 'frame',
noCache: true,
params: config.params || null,
listeners: {
beforeload: {
fn: function () {
tab.body.mask(Ext.String.format('Loading...', config.title));
},
delay: 100
},
load: function (control) {
control.target.iframe.dom.contentWindow.parentTab = control.target;
tab.body.unmask();
}
}
}
});


Load panel and windows content:


<ext:Panel ID="Panel1" Title="Report" runat="server" Closable="true" CloseAction="Hide" AutoScroll="true" Icon="PageWhiteText" Hidden="true">
<Loader runat="server" AutoLoad="false" Mode="Frame" />
<Listeners>
<Close Handler="Ext.Array.remove(visibleTabsArray, 'Panel1');" />
</Listeners>
</ext:Panel>



<ext:Window ID="SampleWindow" runat="server" Icon="Sum" Title="Test"
Width="700" Height="400" MinWidth="700" MinHeight="400" Hidden="true" Modal="true"
CloseAction="Hide" Maximizable="true" Constrain="true">
<Loader runat="server" Url='/Area/Customers/Index" }) %>'
Mode="Frame" TriggerEvent="show" ReloadOnEvent="true" AutoDataBind="true">
<LoadMask Msg="Loading..."
UseMsg="true" ShowMask="true" />
</Loader>
<Listeners>
<BeforeHide Fn="onClose" />
</Listeners>
</ext:Window>



parentWindow.load({
text: 'Loading...',
showMask: true,
mode: "iframe",
nocache: true,
url: '/Sample/Sample/Details'
});


Thanks.

Daniil
Oct 08, 2012, 1:56 PM
Hi @softmachine2011,

Please look at the following examples.
http://examples2.ext.net/#/Panel/Basic/Loader_Html_Mode/
http://examples2.ext.net/#/Loaders/Component/Direct_Method/
http://examples2.ext.net/#/Loaders/Component/Http_Handler/
http://examples2.ext.net/#/Loaders/Component/JSON_WebService/
http://examples2.ext.net/#/search/xrender

Though, it is not always possible to replace all iframes with something other without a deep redesign the application. Also it strongly depends from the requirements. Please clarify what were the initial reasons to use iframes?

This post is also worth to read.
http://forums.ext.net/showthread.php?17187&p=73904&viewfull=1#post73904

softmachine2011
Oct 08, 2012, 2:17 PM
Hi,

As you suggested us at:

http://forums.ext.net/showthread.php?21324-Performance-comparison-between-Ext-NET-1-and-2&p=92367&viewfull=1#post92367

we should avoid to use iframes. As we had shown in our previos samples, we need to create windows dynamically, open tabs contents or load views into both static panels or windows.

Some of these code were taken from Ext.NET v.1X samples and some other code were performed in this way as it was the only way we know.

As you state that iframes were not very good for performance, we need which would be the best way to solve each one of our previous samples without using iframes.

Depending of each solution, we will see if they could be hard to solve some of them or not.

Thanks.

Vladimir
Oct 08, 2012, 3:11 PM
You need to use partial views
Here is simple example

View (Index.aspx)


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


<!DOCTYPE html>


<html>
<head runat="server">
<title>Test</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Show Bob details">
<DirectEvents>
<Click Url="/Sample/ShowWindow">
<ExtraParams>
<ext:Parameter Name="id" Value="1" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>


<ext:Button runat="server" Text="Show John details">
<DirectEvents>
<Click Url="/Sample/ShowWindow">
<ExtraParams>
<ext:Parameter Name="id" Value="2" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</body>
</html>


Partial view (Customer.ascx)


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


<ext:Window runat="server" Layout="FitLayout" Title='<%# Model["title"] %>' AutoDataBind="true" Width="300" Height="300">
<Items>
<ext:FormPanel runat="server">
<Items>
<ext:Hidden runat="server" Name="id" Text='<%# (int)Model["id"] %>' />
<ext:TextField runat="server" Name="firstName" FieldLabel="First name" Text='<%# (string)Model["first"] %>' />
<ext:TextField runat="server" Name="lastName" FieldLabel="Last name" Text='<%# (string)Model["last"] %>' />
<ext:DateField runat="server" Name="dob" FieldLabel="Date of birth" SelectedDate='<%# (DateTime)Model["dob"] %>' />
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Submit">
<Listeners>
<Click Handler="this.up('window').down('form').getForm().submit({u rl:'/Sample/Submit'});" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>


Controller


public ActionResult Index()
{
return this.View();
}


public ActionResult ShowWindow(int id)
{
return this.PartialExtView("Customer", new Dictionary<string, object>
{
{ "id", id },
{ "title", id == 1 ? "Bob" : "John" },
{ "first", id == 1 ? "Bob" : "John" },
{ "last", id == 1 ? "Brown" : "Last" },
{ "dob", DateTime.Now}
});
}


public ActionResult Submit(FormCollection values)
{
X.Msg.Alert("Values", JSON.Serialize(new {
id = values["id"],
first = values["firstName"],
last = values["lastName"],
dob = values["dob"]
})).Show();
return this.FormPanel(true);
}

softmachine2011
Oct 10, 2012, 9:59 AM
Hi,

I applied the example to our test case. (When you open the window, load a grid that is contained in a tab)

To make controls reference, I used the ItemId property.

Attached the example:

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" 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 = {
finishLoadGridPanel1: false,
finishLoadGridPanel2: true,
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();

Ext.Ajax.request({
url: top.Framework.resolveUrl('/Sample/Sample/Details'),
method: 'GET',
success: function (result, request) {
eval(result.responseText);
},
failure: function (result, request) {
debugger;
alert('error');
}
});
},
loadDetailsFormRecords: function (App, record) {
for (var field in record.data)
App[field].setValue(record.data[field]);
},
insertCustomRecords: function (store, prefix) {
top.Trace['StartInsertCustomRecords' + prefix] = new Date();
var records = new Array();
for (var i = 0; i < 50; i++) {
records[i] = {
SampleId: i + 200,
PropertyType: 'Item ' + i,
Data1: new Date().toString(),
Data2: new Date().toString(),
Data3: new Date().toString(),
Data4: new Date().toString(),
Data5: new Date().toString()
};
}
store.suspendEvents(true);
store.insert(0, records);
store.resumeEvents();
top.Trace['StopInsertCustomRecords' + prefix] = new Date();
},
showTrace: function () {

if (top.Framework.finishLoadGridPanel1 && top.Framework.finishLoadGridPanel2) {
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[lastProperty] - 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.ascx



<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<Presentation.Web.MVC.Client.Areas.Sample.ViewModel s.VMSample>>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/Views/Shared/Tab.ascx" TagName="Tab1"
TagPrefix="CustomControls" %>

<ext:Window runat="server" Layout="FitLayout" Title="Details Window" Width="800" Height="600" IDMode="Client">
<Items>
<ext:Panel runat="server" Layout="FitLayout">
<Bin>
<ext:Store ItemID="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="top.Framework.loadDetailsFormRecords(App, 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 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 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 ItemID="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 ItemID="SampleId" runat="server" FieldLabel="SampleId" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ItemID="PropertyName" runat="server" FieldLabel="PropertyName" MaxLength="20"
AllowBlank="false" Width="200" />
<ext:TextField ItemID="Data1" runat="server" FieldLabel="Data1" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ItemID="Data2" runat="server" FieldLabel="Data2" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ItemID="Data3" runat="server" FieldLabel="Data3" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ItemID="Data4" runat="server" FieldLabel="Data4" MaxLength="20" AllowBlank="false"
Width="200" />
<ext:TextField ItemID="Data5" runat="server" FieldLabel="Data5" MaxLength="20" AllowBlank="false"
Width="200" />
</Items>
</ext:FormPanel>
<ext:TabPanel ItemID="mainTabPanel" runat="server" Border="false" Region="Center" DeferredRender="false">
<Items>
<ext:Panel ItemID="tab1" runat="server" Border="false" Title="Tab1" Layout="FitLayout">
<Content>
<CustomControls:Tab1 runat="server" />
</Content>
<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>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Handler="top.Trace['StopOpenDetail'] = new Date();" />
</Listeners>
</ext:Window>


Tab.ascx



<%@ Control Language="C#" Inherits="Presentation.Web.MVC.Client.Helpers.Controls.Tab1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel runat="server" Layout="HBoxLayout" Margins="5">
<Items>
<ext:GridPanel runat="server" Flex="1" AutoScroll="true">
<Store>
<ext:Store runat="server" AutoLoad="true" ShowWarningOnFailure="false" WarningOnDirty="false"
RemoteSort="false" TabIndex="-1">
<Proxy>
<ext:AjaxProxy Url='/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['StartStoreGridPanel1'] = new Date();" />
<Load Handler="
top.Trace['StopStoreGridPanel1'] = new Date();
top.Framework.finishLoadGridPanel1 = true;
/*top.Framework.insertCustomRecords(this, 'GridPanel1'); */
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);
var partialViewResult = this.PartialExtView(list);
partialViewResult.WrapByScriptTag = false;
return partialViewResult;
}

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; }
}
}


In our real application, all references to the controls are undertaken by the Id property and detail windows loaded by iframes.

Would there be any way to prevent migration of the Id property ItemId property? Or an alternative to obtaining or controls through ItemId Id?

Thanks,

Daniil
Oct 10, 2012, 11:44 AM
Yes, you can avoid IDs anywhere where possible and use ItemID with the AbstractContainer's methods: query, down, child. Also the AbstractComponent's up method can be useful.

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-itemId
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-query
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-down
(http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-down)http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-child
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-up

Vladimir
Oct 10, 2012, 12:15 PM
Yes, try do not use ID at all. Otherwise a high risk of id conflicts is possible
Alternatives:

- Use ItemID (which ID is equivalent but ItemID must be unque only inside own container)
- Use ComponentQuery to get reference on required widgets
- Use MessageBus


1. ItemID and ComponentQuery
Lets consider, the example


<ext:Window runat="server">
<Items>
<ext:FormPanel runat="server">
<Items>
<ext:TextField runat="server" ItemID="Field1" />
<ext:TextField runat="server" ItemID="Field2" />
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" ItemID="SubmitButton" />
</Buttons>
</ext:Window>

- How to get window reference from button's click listener


<Click Handler="this.up('window')" />


- How to get Field1 from button's click listener


<Click Handler="this.up('window').down('#Field1')" />


- How to submit the form from button's click listener


<Click Handler="this.up('window').down('formpanel').getForm().subm it();" />


- How to get Field2 from Change listener of Field1


<Change Handler="this.next();" />
<Change Handler="this.ownerCt.getComponent('Field2');" />


ComponentQuery is very powerful mechanism, it allows to avoid id using


2. MessageBus
One of base paradigm of good application architecture is loose coupling
Ideally, each component should not know about other components
You can use MessageBus to publish events from one component which should not know who and how will handle that event. Another component will listen that event and apply required logic after receiving an event
For example, in the following sample, form panel listenes 'App.submit' bus event and submit own fields after events receiving (that event is published by button)


<ext:Window runat="server">
<Items>
<ext:FormPanel runat="server">
<Items>
....
</Items>
<MessageBusListeners>
<ext:MessageBusListener Name="App.submit" Handler="this.getForm().submit();" />
</MessageBusListeners>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server">
<Listeners>
<Click BroadcastOnBus="App.submit" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>

softmachine2011
Oct 11, 2012, 8:55 AM
Hi,

We will analyze all these alternatives carefully.

Either of these options involves a large number of changes to perform in our application, specially due to control's ID problem, and this also added to the huge and expensive migration process to Ext.NET 2.X.

Thanks again.

Daniil
Oct 11, 2012, 12:11 PM
Yes, unfortunately, it complicates migration, but you will much benefit from these changes in the future!

Removing iframes where possible and where they are not required improves the performance.

Avoiding IDs and loose coupling are also very productive programming strategies.

softmachine2011
Oct 11, 2012, 3:13 PM
Well,

Our CEO don't see these future benefits. He only see how much time we had spend migrating our application and how expensive will be to remove iframes. And at the moment, we have a loss of speed and don't know a concrete release date due to memory leaks problems.

It's very difficult for us at the moment to persude our managers about any benefits in these circumstances.