1. #1
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    126
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default Unanswered: Creating New Application window in Popup window

    We have popup window functionality in our application wherein we can render entire application page within a popup window launched from a parent window.
    We use Javascript windows currently and write html (index jsp with new parameters) which posts to backend and renders new page in window, running app.js to create new viewport and components.
    This works fine except few minor versions of IE9 which give permissions denied message.

    To circumvent this IE issue and also to improve usability, we need to do this using Ext windows. Unlike, JS windows, we cannot run app.js again directly within Ext window as it is a component.
    I tried using iframe by specifying html to srcdoc attribute but cannot get it to work. I only see blank Ext window with my html in page sources. there are no errors in console.

    Could you suggest if I am heading in right direction or point me in right direction? Basically we want to create 2 application windows(viewports sort of) using Ext window for popup window.
    See below code on constructing the new window with iframe and html that I render it in.
    Code:
    Ext.define('My.view.DocumentWindow', {
        extend: 'Ext.window.Window',
        alias: 'widget.osDocumentWindow',
        id:'os-document-window',
        title: 'Document'.lclize(),
        closable: true,
        modal:true,
        maximizable: true,
        closeAction: 'destroy',
        constrain: true,
        autoShow:true,
        width: 600,
        height: 700,
        bodyPadding: 5,
        config:{
            documentURL:{},
            html:{}
        },
        layout: {
            type: 'fit',
            padding: 5
        },
        initComponent:function() {
    
    
            var item = {};
            item.xtype = 'component';
            item.id = 'docContent';
            item.html = '<iframe srcdoc="' + this.html + '" width="100%" height="100%" />';
            this.items = item;
            //this.html = this.html;
            this.callParent(arguments);
        },
        tools: [ 
                {
                    id: 'docWinRestoreBtn',
                    tooltip: 'Restore',
                    type: 'restore',
                    hidden : true,
                    handler: function( evt,toolEl,owner,tool ) {
                        var win = Ext.getCmp('os-document-window');
                        win.center();
                        win.setWidth(600);
                        win.expand();
    
    
                        var restoreBtn = Ext.getCmp('docWinRestoreBtn');
                        restoreBtn.hide();
                        restoreBtn.nextSibling().show();
                    }
                },
                {
                    id: 'docWinMinimizeBtn',
                    tooltip: 'Minimize',
                    type:'minimize',
                    handler: function( evt,toolEl,owner,tool ){
                        var win = Ext.getCmp('os-document-window');
                        win.collapse();
                        win.setWidth( 150 );
                        win.alignTo( Ext.getBody(), 'bl-bl');
    
    
                        var minBtn = Ext.getCmp('docWinMinimizeBtn');
                        minBtn.hide();
                        minBtn.previousSibling().show();
                    },
                }
        ]
    });
    HTML Code:
    <!DOCTYPE HTML>
    <html><head>
    <meta charset="UTF-8"><link rel="shortcut icon" href="/myapp/skins/core/icons/favicon.ico" type="image/x-icon"><title>Connecting, please wait...</title><link rel="stylesheet" href="/myapp/skins/core/myapp.css"><script type="text/javascript" src="JsServlet" charset="UTF-8"></script>
        
            <!-- <x-compile> -->          <!-- <x-bootstrap> -->             <script type="text/javascript" src="ext/ext-dev.js" charset="UTF-8"></script>           <!-- </x-bootstrap> -->                        <script type="text/javascript" src="app.js" charset="UTF-8"></script>        <!-- </x-compile> -->
     <script type="text/javascript">                if (Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject) {             Ext.apply(Ext, {                isIE11: true,                ieVersion: 11            });        } </script>
    <script type="text/javascript">
    var os_non_app_page = false; </script></head><body style="overflow-y:hidden"> <script type="text/javascript">      var os_app_startup_flag = true;   var os_app_ctx_url = '/myapp';                  os_app_startup_flag = false;            var os_startup_exchange_id = 1218;    var os_startup_action_id = 'Action.2';    var os_startup_tx_ctrl_id = '1';    var os_startup_pres_xml_only = 'false';        var os_test_xml = 'null';        var os_post_url = 'MywayServlet';        var os_view_port = 'Myapp.view.Viewport';    var os_mandatory_scheme  = 'Myapp.view.validation.YellowMandatoryScheme';    var os_jsMode  = 'debug';    var os_skin  = '/myapp/skins/core';        var external_mt_locale_id = '';    var redirectIndexPage = 'null';    var pageJSON = null;    var popup = false;    </script>      <!-- Fields required for history management -->    <form id="history-form" class="x-hide-display">        <input type="hidden" id="x-history-field" />        <iframe id="x-history-frame"></iframe>    </form></body></html>

  2. #2
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    126
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default

    Guys, any update. Thanks in advance

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    126
    Vote Rating
    0
    Jeff Liotta is on a distinguished road

      0  

    Default

    Ping...

Similar Threads

  1. Popup window going outside of main window on resize.
    By chetan.nellekeri in forum Ext: Q&A
    Replies: 5
    Last Post: 16 May 2014, 5:05 AM
  2. Replies: 3
    Last Post: 25 Feb 2013, 3:11 AM
  3. HtmlEditor Popup modal window displayed behind main window
    By vizcano in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 31 Oct 2009, 12:46 AM
  4. Creating a small popup with parents window masked
    By raviext in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 14 May 2008, 10:06 AM