[CLOSED] iFrame load alternative?

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] iFrame load alternative?

    Hi,

    Following the comments of the following post:

    Performance comparison between Ext.NET 1 and 2

    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,
    Last edited by Daniil; Nov 20, 2012 at 12:58 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    Hi @softmachine2011,

    Please look at the following examples.
    https://examples2.ext.net/#/Panel/Ba...der_Html_Mode/
    https://examples2.ext.net/#/Loaders/...Direct_Method/
    https://examples2.ext.net/#/Loaders/.../Http_Handler/
    https://examples2.ext.net/#/Loaders/...ON_WebService/
    https://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...ll=1#post73904
  4. #4
    Hi,

    As you suggested us at:

    http://forums.ext.net/showthread.php...ll=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.
  5. #5
    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({url:'/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);
            }
  6. #6
    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.ViewModels.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.ViewModels.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.ViewModels;
    using Ext.Net.MVC;
    
    namespace Presentation.Web.MVC.Client.Areas.Sample.Controllers
    {
        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.ViewModels
    {
        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,
  7. #7
  8. #8
    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().submit();" />
    - 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>
  9. #9
    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.
  10. #10
    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.
    Last edited by geoffrey.mcgill; Oct 11, 2012 at 5:02 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. load iframe from javascript
    By pintun in forum 1.x Help
    Replies: 5
    Last Post: Dec 27, 2011, 3:15 PM
  2. [CLOSED] Iframe Load event
    By caha76 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 26, 2011, 7:54 AM
  3. How to load pages in same tab with single iframe
    By NishaLijo in forum 1.x Help
    Replies: 0
    Last Post: Aug 19, 2010, 10:39 AM
  4. [CLOSED] Load Fresh Page In iFrame...
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 03, 2010, 3:19 PM
  5. Grip Render Issue on Tab iFrame load
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Sep 15, 2009, 3:46 PM

Tags for this Thread

Posting Permissions