PDA

View Full Version : Window within Window



hpet
18 Mar 2011, 1:11 AM
Due to some design requirements I need to have a floating element with other floating element (I use Window objects).

Everything works ok, but there seems to be some issue (bug?) with CSS, and have no idea how to overcome it: if "master window" is maximizied, it also affects "child" window apperance, which gets the same visual effect as maximizied (looses side boders, looses resize handles, etc.), but not maximized.

When "this.el.addClass('x-window-maximized');" is applied, it also affects child window(s).

Simple drop-in example (adjust paths) - maximize/restore window to see the effect:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
</head>

<body scroll="no">
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<script>
Ext.onReady(function() {
new Ext.Window({
width: 800,
height: 700,
renderTo: document.body,
layout: 'border',
maximizable: true,
items: [
{
region:'west',
margins: '5 5 5 5',
width: 300,
layout: 'fit',
html: 'west'
},
{
region:'center',
margins: '5 5 5 5',
layout:'fit',
html:'center'
}
],

listeners: {
afterrender: function(panel) {
new Ext.Window({
width: 100,
height: 100,
renderTo: panel.getEl(),
layout: 'fit',
constrain: true,
html: 'my contained window'
}).show();
}
}

}).show();
});
</script>

</body>
</html>