PDA

View Full Version : Ext.Window not working with frameset



vishalgandhe
11 Feb 2011, 12:18 PM
I have a simple HTML page which has framesets with 3 frames and I am trying to create a modal EXT window on top of the page. The issue I am facing is the window is not show at all.
To Test, I removed the frameset and add simple Divs and bingo the Window is visible. I am sure why the window is not working with frameset. Can someone help me?
Here is the sample code,

<frameset onload=”grayOutDoc()” id="test" rows="85,*" border="1">
<frame src="test.html" name="menu">
</frame>
<frame src="test2.html" name="body">
</frame>
</frameset>


Javascript function is ,

function grayOutDoc() {
var win = new Ext.Window({
layout: 'fit',
title: 'Sample Window',
id: 'panelWindowId',
autoHeight: true,
width:300,
resizable: false,
closable: false,
modal: true,
x : document.body.offsetWidth - 250,
y : 20,
html: 'Test'
});
win.show();

}

Condor
12 Feb 2011, 1:01 AM
Can you even display elements (except frames) inside a frameset?

Instead of a frameset, use a normal page and change the 2 frames to iframes. Next use an Ext.Viewport with layout:'border' and create xtype:'box' north and center elements with the el set to the two iframes.

vishalgandhe
14 Feb 2011, 7:18 AM
Hi Candor,

I agree that we can not display any elements except frames in a Frameset but I was looking to build a small customized wrapper EXTAPIs which can be hooked in too any existing HTML and can show the modal window to trigger the generic (generic to my apps) flow. Now as there are multiple applications, this HTML can be anything even the frameset. So can you guide me to the best approach to build this with the minimal change to the existing codebase (HTML).

Condor
17 Feb 2011, 2:00 AM
Instead of a frameset you can use:

<script type="text/css">
Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 85,
xtype: 'box',
el: 'menu',
autoShow: true
}, {
region: 'center',
xtype: 'box',
el: 'body',
autoShow: true
}]
});
});
</script>
<div id="menu" class="x-hidden">...</div>
<div id="body" class="x-hidden">...</div>
or with IFRAMES:

Ext.onReady(function(){
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 85,
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'test.html'
}
}, {
region: 'center',
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'test2.html'
}
}]
});
});