[CLOSED] Accessing a child window component from the parent

  1. #1

    [CLOSED] Accessing a child window component from the parent

    Hi,

    I need to get a handle on the child window components from the hosting page. That's mainly to resolve the layout problems occurring on the child window when it loads. However, it would be nice to know the pattern going forward as well. Please refer to the sample code below.

    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 = false;
                var url = "ChildPage.aspx";
    
                if (Ext.isEmpty(wnd.iframe)) {
                    wnd.load({
                        url: url,
                        //params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
                        callback: function () {
                            // The grid reference is null so it doesn't work
                            var grid = wnd.getBody().Ext.ComponentQuery.query('gridpanel(true)');
                            grid.doLayout();
                            //wnd.getBody().getCmp("GridPanel1").doLayout();
                            Ext.Msg.alert("Loaded", "Window was loaded!");
                        },
                        //scope: yourObject, // optional scope for the callback
                        discardUrl: false,
                        nocache: true,
                        text: 'Loading...',
                        timeout: 10,
                        scripts: true
                    });
                }
                wnd.hidden = true;
            };
    
            var onDocumentReady = function () {
                loadWindow();
                var win = App.Window1;
                win.on({
                    "show": {
                        fn: function () {
                            // Data bind the GridPanel on window showing
                            win.getBody().X.DataBind({
                                eventMask: { showMask: true },
                                success: function (result) {
                                },
    
                                failure: function (errorMessage) {
                                }
                            });
                        },
                        scope: this,
                    },
                    "hide": {
                        fn: function () {
                            // Reconfigure the GridPanel on window hiding
                            win.getBody().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" HideMode="Offsets">
                <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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    </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>
    Last edited by Daniil; Sep 25, 2015 at 12:57 PM. Reason: [CLOSED]
  2. #2
    After fiddling with the code, I surmise that getting child window components in the load callback isn't the best approach. Likely, those components aren't initialized completely yet. If they are accessed when the window is displayed, the results are more in line with what I need. The updated code is below. If my thinking process has been correct, please mark this thread as closed.

    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);
    
                // These calls succeed
                wnd.getBody().Ext.getCmp("Viewport1").doLayout();
                wnd.getBody().Ext.getCmp("GridPanel1").doLayout();
            };
    
            var loadWindow = function () {
                var wnd = App.Window1;
                wnd.hidden = false;
                var url = "ChildPage.aspx";
    
                if (Ext.isEmpty(wnd.iframe)) {
                    wnd.load({
                        url: url,
                        //params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
                        callback: function () {
                            // The grid reference is null so it doesn't work
                            var grid = wnd.getBody().Ext.ComponentQuery.query('gridpanel(true)');
                            //grid.doLayout();
                            Ext.Msg.alert("Loaded", "Window was loaded!");
                        },
                        //scope: yourObject, // optional scope for the callback
                        discardUrl: false,
                        nocache: true,
                        text: 'Loading...',
                        timeout: 10,
                        scripts: true
                    });
                }
                wnd.hidden = true;
            };
    
            var onDocumentReady = function () {
                loadWindow();
                var win = App.Window1;
                win.on({
                    "show": {
                        fn: function () {
                            // Data bind the GridPanel on window showing
                            win.getBody().X.DataBind({
                                eventMask: { showMask: true },
                                success: function (result) {
                                },
    
                                failure: function (errorMessage) {
                                }
                            });
                        },
                        scope: this,
                    },
                    "hide": {
                        fn: function () {
                            // Reconfigure the GridPanel on window hiding
                            win.getBody().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" HideMode="Offsets">
                <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>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X" />
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <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>
  3. #3
    Hi Vadym,

    I would try this in a .load()'s callback:
    var childExt = wnd.getBody().Ext;
    
    childExt.onReady(function() {
        childExt.getCmp("Viewport1").doLayout();
    });
    That is theoretically. I didn't give it a try.

    As for a show handler - I am a bit not sure that is a reliable approach. More investigation will be required if the approach that I mentioned above doesn't work for you.
  4. #4
    Calling it on Ready seems to be working although I can't confirm if the layout is actually being fixed while the window is hidden. As you've suggested, more testing is required to come to definitive conclusion. In the meantime, thanks a bunch for the workaround and please mark this thread as closed.

Similar Threads

  1. Replies: 5
    Last Post: Mar 29, 2012, 9:31 PM
  2. Replies: 6
    Last Post: Feb 15, 2012, 4:15 PM
  3. Replies: 7
    Last Post: Feb 09, 2012, 11:17 AM
  4. Replies: 0
    Last Post: Jul 28, 2009, 3:53 PM
  5. Replies: 1
    Last Post: Apr 01, 2009, 12:24 PM

Tags for this Thread

Posting Permissions