View Full Version : Creating New Application window in Popup window

Jeff Liotta
30 Apr 2015, 7:04 AM
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.

Ext.define('My.view.DocumentWindow', {
extend: 'Ext.window.Window',
alias: 'widget.osDocumentWindow',
title: 'Document'.lclize(),
closable: true,
maximizable: true,
closeAction: 'destroy',
constrain: true,
width: 600,
height: 700,
bodyPadding: 5,
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;
tools: [
id: 'docWinRestoreBtn',
tooltip: 'Restore',
type: 'restore',
hidden : true,
handler: function( evt,toolEl,owner,tool ) {
var win = Ext.getCmp('os-document-window');

var restoreBtn = Ext.getCmp('docWinRestoreBtn');
id: 'docWinMinimizeBtn',
tooltip: 'Minimize',
handler: function( evt,toolEl,owner,tool ){
var win = Ext.getCmp('os-document-window');
win.setWidth( 150 );
win.alignTo( Ext.getBody(), 'bl-bl');

var minBtn = Ext.getCmp('docWinMinimizeBtn');

<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>

Jeff Liotta
1 May 2015, 10:31 AM
Guys, any update. Thanks in advance

Jeff Liotta
5 May 2015, 6:35 AM