[CLOSED] Loading a Window on the client

**vadym.f** · Sep 22, 2015, 7:25 PM

Hi,

Please advise how to convert to v3.2 a 1.7 code snippet loading a Window object on the client. The script executes if the content of the window frame hasn't been loaded yet.

        var win = Ext.getCmp(windowId);

        if (Ext.isEmpty(win.iframe)) {
            win.load({
                url: url,
                //params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
                callback: function () { alert('Loaded!'); },
                //scope: yourObject, // optional scope for the callback
                discardUrl: false,
                nocache: true,
                text: 'Loading...',
                timeout: 30,
                scripts: true
            });
        }

**geoffrey.mcgill** · Sep 23, 2015, 2:23 PM

Can you post a simplified .aspx sample demonstrating the whole scenario. Just plopping a random snippet of js into a forum post does not give us enough information to reproduce the scenario.

**vadym.f** · Sep 24, 2015, 12:01 PM

Here's the fulsome test case. Please let me know if more info is needed.

MainPage.aspx

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

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

</script>
<!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 id="Head1" runat="server">
    <title>Ext.Net 3.x Examples</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    <script type="text/javascript">
        var showWindow = function () {
            var wnd = App.Window1;
            wnd.center();
            wnd.setVisible(true);
        };

        var loadWindow = function () {
            var wnd = App.Window1;
            wnd.hidden = true;
            var url = "ChildPage.aspx";

            // The logic in this code snippet is to be converted to v3.2
            if (Ext.isEmpty(wnd.iframe)) {
                wnd.load({
                    url: url,
                    //params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
                    callback: function () { Ext.Msg.alert("Loaded", "Window was loaded!"); },
                    //scope: yourObject, // optional scope for the callback
                    discardUrl: false,
                    nocache: true,
                    text: 'Loading...',
                    timeout: 10,
                    scripts: true
                });
            }
        };

        var onDocumentReady = function () {
            loadWindow();
            var win = App.Window1;
            win.on({
                "show": {
                    fn: function () {
                        // Data bind the GridPanel on window showing
                        win.getBody().Ext.X.DataBind({
                            eventMask: { showMask: true },
                            success: function (result) {
                            },

                            failure: function (errorMessage) {
                            }
                        });
                    },
                    scope: this,
                },
                "hide": {
                    fn: function () {
                        // Reconfigure the GridPanel on window hiding
                        win.getBody().Ext.X.Reconfigure({
                            eventMask: { showMask: true },
                            success: function (result) {
                            },

                            failure: function (errorMessage) {
                            }
                        });
                    },
                    scope: this
                }
            });
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X">
            <Listeners>
                <DocumentReady Fn="onDocumentReady" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:FormPanel ID="FormPanel1" runat="server" Border="true" Frame="false" Header="false"
                    TrackResetOnLoad="true" AutoScroll="false" ButtonAlign="Right">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Show Window" Icon="StatusOnline" Disabled="false">
                                    <Listeners>
                                        <Click Fn="showWindow" />
                                    </Listeners>
                                </ext:Button>
                                <ext:ToolbarSeparator runat="server">
                                </ext:ToolbarSeparator>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
        <ext:Window ID="Window1" runat="server" Icon="CogEdit" Title="Edit" Width="800" Height="600"
            Resizable="false" Collapsible="false" Hidden="true" Modal="true" Draggable="true" Layout="FitLayout">
            <Loader ID="Loader1" runat="server" Mode="Frame" AutoLoad="false" DisableCaching="true">
                <LoadMask ShowMask="true" Msg="Loading Child Page...">
                </LoadMask>
            </Loader>
            <Items>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

ChildPage.aspx

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (X.IsAjaxRequest) return;
    }

    private object[] TestData
    {
        get
        {
            var now = DateTime.Now;
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }
    }

    [DirectMethod]
    public void DataBind()
    {
        Store1.DataSource = TestData;
        Store1.DataBind();
    }

    [DirectMethod]
    public void Reconfigure()
    {
        this.GridPanel1.Reconfigure();
    }
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Ext.Net 3.x Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Flex="1" Border="true" BodyBorder="1">
                    <Store>
                        <ext:Store ID="Store1" runat="server" RemoteSort="false"
                            AutoLoad="true" PageSize="10">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="company">
                                    <Fields>
                                        <ext:ModelField Name="company" />
                                        <ext:ModelField Name="price" Type="Float" />
                                        <ext:ModelField Name="change" Type="Float" />
                                        <ext:ModelField Name="pctChange" Type="Float" />
                                        <ext:ModelField Name="lastChange" Type="Date" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                <Editor>
                                    <ext:TextField ID="TextField1" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                <Editor>
                                    <ext:TextField ID="TextField2" runat="server" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                            <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                            <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                Format="HH:mm:ss" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                    </SelectionModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                        </ext:PagingToolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Sep 24, 2015, 12:38 PM

Thank you, Vadym. So, the problem with the test is a "Cannot read property 'X' of undefined" JavaScript error when the "Show Window" button is clicked, isn't? Seems it is a different problem (is it?) rather than you asked in the original post, but the error is thrown for me.

It is too early to access a child page's Ext inside a Window's show listener. It is not loaded yet. I would try to use a Loader's load listener.

**vadym.f** · Sep 24, 2015, 1:04 PM

Hi Daniil! I think the problem starts with this condition check:

if (Ext.isEmpty(wnd.iframe))

It seems that iframe is no longer a property of the Window object. I've tried window.frame but it's been changed to boolean and no longer references the actual iframe object. I'd like to learn how to replace this piece of logic in v3.x.

**Daniil** · Sep 24, 2015, 1:20 PM

For the the Window's iframe is undefined before loading and it holds an iframe element when it is loaded. So, for me it appears to be working as you are requesting.

**vadym.f** · Sep 24, 2015, 1:26 PM

I see. Then my problem is that window.load() call doesn't result in instantiating the iframe property. It doesn't cause the ChildPage.aspx Page_Load event handler to fire, either, so I believe my setup is incorrect. BTW, is iframe a supported property of the Window object? It's not listed on http://docs.sencha.com/extjs/5.1/5.1....window.Window.

**Daniil** · Sep 24, 2015, 2:55 PM

I see. Then my problem is that window.load() call doesn't result in instantiating the iframe property. It doesn't cause the ChildPage.aspx Page_Load event handler to fire, either, so I believe my setup is incorrect.

Is that reproducible on your side with the posted test case? It is not reproducible on my side. The iframe property is instantiating correctly and the child page's Page_Load is executed (I had to add it to the test case, though).

BTW, is iframe a supported property of the Window object?

A native ExtJS Loader doesn't support loading of iframes. It is the functionality in Ext.NET. It is why the property is not listed in the ExtJS docs. I think you can use the property for your needs.

**vadym.f** · Sep 24, 2015, 3:04 PM

Thanks for the pointers! Yes, it's reproducible on my side with the updated test case in this post running in IE11. The Page_Load event handler of the ChildPage.aspx doesn't fire after the window is initially loaded inside the loadWindow function.

Edit in:
Page_Load event handler of the ChildPage.aspx does execute once when the window is actually shown by calling its show() method. I would expect it to fire on window.load() instead.

**Daniil** · Sep 24, 2015, 5:36 PM

It looks like the same problem has been discussed here.
http://forums.ext.net/showthread.php?25670

I am not sure it is going to work with v3, but I would try the v2 solution.

Thread: [CLOSED] Loading a Window on the client

Thread Tools

Search Thread

Display

[CLOSED] Loading a Window on the client

Similar Threads

[CLOSED] GridPanel MenuFilter need to re-fire after loading data client side

[CLOSED] Problem loading Window on the client

[CLOSED] Loading a UserControl into a Windows (Client Side)

[CLOSED] Iframe not loading from client side

On IE8, when loading a ext:Window with .ashx the Process DOES NOT completes... and the Progress Bar still looks like its loading

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Loading a Window on the client

[CLOSED] Loading a Window on the client

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us