[CLOSED] Closing a window that was loaded with a Loader control

  1. #1

    [CLOSED] Closing a window that was loaded with a Loader control

    I have a window that opens another window using a Loader inside of a panel. I am trying to close that loaded window when a button (Apply) inside the window is pressed. Seems like a simple window.close would work, but it does not.

    Outer page:
    <!DOCTYPE html>
    <script runat="server">
        Protected Sub Page_Load(sender As Object, e As EventArgs)
        End Sub
    
        Protected Sub btnSettings_Click(sender As Object, e As DirectEventArgs)
            pnlSettings.Show()
            winSettings.Show()
        End Sub
    
    </script>
    
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
      
            <ext:Window ID="winSettings" runat="server" Hidden="true" Modal="true"
                Height="700"
                Width="900"
                Title="Portfolio Settings"
                Layout="FitLayout">
                <Items>
                    <ext:Panel ID="pnlSettings" runat="server"
                        Hidden="True"
                        Layout="FitLayout">
                        <Loader
                            runat="server"
                            Url="testLoadPage.aspx"
                            Mode="Frame"
                            TriggerEvent="show"
                            ReloadOnEvent="true"
                            DisableCaching="true">
                            <LoadMask ShowMask="true" />
                        </Loader>
                    </ext:Panel>
                </Items>
            </ext:Window>
    
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout" Scrollable="Both">
            <Items>
                                
                <ext:Panel runat="server"
                        Frame="false"
                        MinWidth="1200"
                        MinHeight="800">
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
    
                        <ext:Panel
                            ID="upperPn"
                            runat="server"
                            Flex="1"
                            Frame="false">
                            <LayoutConfig>
                                <ext:HBoxLayoutConfig Pack="Center" Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Panel ID="pnlActions" runat="server"
                                    Title="Actions"
                                    BodyPadding="15"
                                    Padding="10"
                                    Flex="1">
                                    <Items>
                                        <ext:Button runat="server" ID="btnSettings" Text="Settings">
                                            <DirectEvents>
                                                <Click OnEvent="btnSettings_Click"></Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
    
                   </Items>
                </ext:Panel>
    
            </Items>
    
        </ext:Viewport>
    
    
    
        </div>
        </form>
    
    </body>
    </html>
    Loaded page:

    <!DOCTYPE html>
    <script runat="server">
        Public Sub btnApplyChanges_Click(ByVal sender As Object, e As DirectEventArgs)
            ' save some things to database
            Ext.Net.X.Js.Call("saveSuccess")
        End Sub
        Protected Sub Page_Load(sender As Object, e As EventArgs)
        End Sub
    
    </script>
    
    <html>
    <head>
        <title></title>
    	<meta charset="utf-8" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager runat="server" />
    
            <ext:XScript runat="server">
                <script type="text/javascript">
                                  
                    var saveSuccess = function () {
                         Ext.Msg.alert("Information","Changes were saved.");
                        //this.parent.close();  this closes the outer window
                        this.window.close();
                        this.close();
                        window.close();
                        // none of the above work
                    }
    
                </script>
            </ext:XScript>
    
    
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel id="pnlSettings" runat="server" Layout="FitLayout">
                        <items>
                            <ext:TabPanel
                                id="pnlTabs"
                                runat="server"
                                MarginSpec="0 0 20 0">
                                <Items>
                                    <ext:Checkbox ID="Trigger" runat="server"  labelwidth="200">
                                    </ext:Checkbox>
    
                                </Items>
                                    <BottomBar>
                                        <ext:Toolbar runat="server">
                                            <Items>
                                                <ext:ToolbarFill></ext:ToolbarFill>
                                                <ext:Button ID="btnApplyChanges" runat="server" Text="Apply" >
                                                    <DirectEvents>
                                                        <Click OnEvent="btnApplyChanges_Click">
                                                        </Click>
                                                    </DirectEvents>
                                                </ext:Button>
                                                <ext:Button runat="server" Text="Cancel"></ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
    
                            </ext:TabPanel>
    
                        </items>
    
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
    
        </div>
        </form>
    
    </body>
    </html>
    Last edited by fabricio.murta; Sep 22, 2017 at 10:11 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @rmelancon!

    Yes, this shouldn't work. When you refer from the IFrame's inner document's top level:
    - this.parent: you point towards the iframe on the outer page. This actually shouldn't close the window, but perhaps only the iframe
    - this.window: is the global JavaScript namespace in the inner document. or rather, the Browser Object Model reference for that sub-page.
    - window: same as above.
    - this.close: I think this is also addressing the global js namespace inside the iframe document scope
    this has nothing to do with any Ext.NET components -- except you should have an "App" variable there which you.

    So if you want to call panels' close() method, you should be getting the panels' handles to do so.

    You want to close the "pnlSettings", right? This is the panel you load the iframe into. So you should be doing something like this on your javascript:

    this.parent.App.pnlSettings.close();
    Or any of the "same" approaches, like:
    - this.parent.App (used above)
    - parent.App
    - window.parent.App
    - this.window.parent.App

    A little more about iframe communication is explored in the Panel > Basic > IFrame Communication example in our examples explorer.

    If you want to experiment with commands from the console, you should ensure you move the console scope to one of the sub-pages (so that window.parent will be pointing towards the page surrounding that "inner page" (iframe).

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    So in this example this.parent.App.pnlSettings.close() works but what I really need is the window to close, so this.parent.App.winSettings.close() does what I want. However when I plug this into the "real world" code, this.parent is undefined. Probably something to do with the fact that there are Master pages involved so I may have to redo my example with master pages if I can't figure out the heirarchy and how to get to the parent property.

    So in the real code this.parent is undefined by I do have access to this.findParentBy and this.findParentByType. Trying to figure out what I need to send as a parameter to get to parent...
    Last edited by rmelancon; Jul 21, 2017 at 1:28 PM.
  4. #4
    Hello @rmelancon!

    Yes, the relation of sub-pages and master pages is not thru window.parent. This would only be true in IFrames (which are essentially pages inside other pages, at client browser level).

    The master-slave pages relationship is resolved on server-side and a single page is presented. So, say you have a component on your master page named after pnlSettings, you should be able to access it via App.pnlSettings only.

    Also if you use loaders with anything not Mode="Frame", they won't have the window.parent relationship, but all rendered in the same page frame.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @rmelancon!

    It's been a while since we replied this inquiry and still no feedback from you. Do you still need help with this, or did the answer not fulfill the question?

    We may mark this thread as closed given no feedback in 7+ days from now, but you'll still be able to post here no matter whether it is marked as closed or not.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jan 28, 2013, 4:51 AM
  2. [CLOSED] reference of a control loaded by component loader
    By mirwais in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 28, 2012, 1:05 PM
  3. [CLOSED] Problem: Closing Maximized Window will loose parent window scrollbar
    By tlfdesarrollo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 19, 2012, 8:51 PM
  4. Replies: 7
    Last Post: Feb 09, 2012, 11:17 AM
  5. [CLOSED] Closing a window from within AJAX loaded content
    By pschojer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 26, 2009, 9:06 AM

Posting Permissions