[CLOSED] ext.net window with frame renderer and bootstrap

  1. #1

    [CLOSED] ext.net window with frame renderer and bootstrap

    Hello,

    I have a page with a button. this button will open an Ext.net Window with component loader and frame renderer. the page that will open inside this window is an aspx page that contains html elements and bootstrap. I have a problem that when opening this page inside the window the styling is not applied. and if I open it independently it is working fine.

    Please find the sample code:

    Parent Page: (Home.aspx):

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            function OpenWindow()
            {
    
                var loadingMSG = "Loading";
                var windowID = "QED";
                var height = 500;
                var width = 700;
    
               
                    var win1 = new Ext.Window({
                        id: windowID,
                        closeAction: 'destroy',
                        constrain: true,
                        width: 500,
                        height: 350,
                        resizable: false,
                        draggable: true,
                        closable: true,
                        modal: false,
                        layout: 'fit',
                        plain: true,
                        maximizable: true,
                        minimizable: true,
                        listeners: {
    
                            afterrender: function () {
                                setTimeout(function () {
    
                                    eval("App." + windowID + ".getLoader().load();");
                                }, 500);
    
                            }
    
                        },
                        tools: [{
                            type: 'toggle',
                           
                        }],
    
                        loader: {
                            url: 'Test.aspx',
                            loadMask: { showMask: true, msg: loadingMSG },
                            autoLoad: false,
                            renderer: 'frame',
                        },
                      
                        
                     
    
    
                    });
    
                    win1.show();
                
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
             <ext:ResourceManager runat="server" />
                <ext:Button runat="server" ID="Button1" Text="Open" OnClientClick="OpenWindow" />
    
        </div>
        </form>
    </body>
    </html>

    Child Page: (Test.aspx)
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
           <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="../css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../css/font-awesome.min.css"/>
        <script src="../Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <div class="container-fluid">
    
                <div class="row">
    
                    <div class="col-lg-12 col-md-12 col-sm-12" >
                        <p style="text-align:center;"><label>Allocate/Deallocate Tasks</label></p>
                    </div>
    
                    <div class="col-lg-6 col-md-6 col-sm-6" >
                        <label class="radio-inline"><input type="radio" value="Allocate" name="AllocateDeallocateGroup" />Allocate</label>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6" >
                        <label class="radio-inline"><input type="radio" value="Deallocate" name="AllocateDeallocateGroup" />Deallocate</label>
                    </div>
                </div>
    
            </div>
    
    
        </form>
    </body>
    </html>

    N.B: I don't want to use resource manager and ext.net viewport in child page, I want to use bootstrap styling and html tags. is there anything in the creation of the window that is causing this problem?

    Thank you
    Last edited by fabricio.murta; Jul 28, 2018 at 3:28 AM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello @Geovision!

    Use the loader like this example: Window > Basic > External website.

    In case you need to refresh and not always create a new window, then you can set up the loader to either unload on close/hide or refresh on show.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello,
    I don't think you get my issue. Please if you can run the update sample code provided you can reproduce the problem, also please check the attached screenshots:

    1-IndependentPage
    2-Iframe

    1- HomePage (Home.aspx)
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
        <script type="text/javascript">
    
            function OpenWindow()
            {
    
                var loadingMSG = "Loading";
                var windowID = "QED";
                var height = 500;
                var width = 700;
    
               
                    var win1 = new Ext.Window({
                        id: windowID,
                        closeAction: 'destroy',
                        constrain: true,
                        width: 500,
                        height: 350,
                        resizable: false,
                        draggable: true,
                        closable: true,
                        modal: false,
                        //layout: 'fit',
                        plain: true,
                        maximizable: true,
                        minimizable: true,
                        listeners: {
    
                            afterrender: function () {
                                setTimeout(function () {
    
                                    eval("App." + windowID + ".getLoader().load();");
                                }, 500);
    
                            }
    
                        },
                        tools: [{
                            type: 'toggle',
                           
                        }],
    
                        loader: {
                            url: 'Test.aspx',
                            loadMask: { showMask: true, msg: loadingMSG },
                            autoLoad: false,
                            renderer: 'frame',
                        },
                      
    
                    });
    
                    win1.show();
                
            }
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
             <ext:ResourceManager runat="server" />
                <ext:Button runat="server" ID="Button1" Text="Open" OnClientClick="OpenWindow" />
    
        </div>
        </form>
    </body>
    </html>

    2- ChildPage (Test.aspx)
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
           <script src="../Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="../css/bootstrap.min.css"/>
        <link rel="stylesheet" href="../css/font-awesome.min.css"/>
        <script src="../Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
    
            <div class="container">
              <h1>Hello World!</h1>
              <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6" style="background-color:yellow;">
                  <p>Lorem ipsum...</p>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6" style="background-color:pink;">
                  <p>Sed ut perspiciatis...</p>
                </div>
              </div>
            </div>
    
    
        </form>
    </body>
    </html>

    Thank youClick image for larger version. 

Name:	Iframe.PNG 
Views:	50 
Size:	13.0 KB 
ID:	25137Click image for larger version. 

Name:	IndependentPage.PNG 
Views:	104 
Size:	9.4 KB 
ID:	25138
    Last edited by Geovision; Mar 29, 2018 at 7:05 AM.
  4. #4
    Hello @Geovision!

    I don't see anything wrong or not working on your sample. Your ext window's width is much smaller than the standalone window you open with the page. Try either of the following (or both, for comparison):

    - Maximize the Ext window in the Ext.NET page.
    - Open a browser window about the size (at least width-wise) the Ext.Window would have.

    At least that's the results I'm getting here. I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again, @Geovision!

    It's been a while since we last replied your inquiry here and still no feedback from you. Did the last message help you figure out what was wrong -- and how to deal with -- the issue you pointed?

    We may mark the thread as closed if you do not post a follow-up in 7+ days from now, but we won't lock up the thread, so you'll still be able to post afterwards.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Window with frame, closed event
    By bbros in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 03, 2018, 2:59 PM
  2. [CLOSED] renderer"frame" alternative in examples solution
    By registrator in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 19, 2015, 8:53 PM
  3. Window not rendering frame for content
    By jbarbeau in forum 2.x Help
    Replies: 2
    Last Post: Sep 02, 2014, 5:21 PM
  4. reload desktop window frame
    By krishna in forum 1.x Help
    Replies: 0
    Last Post: Mar 01, 2012, 11:51 AM
  5. [CLOSED] Pass value of row to window with frame
    By CSG in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 26, 2009, 12:29 PM

Posting Permissions