We have a modal window, that's defined as part of a FormPanel, that we want bound to the form, but to display at the page level (the window is bigger than the constraints of the panel, and should prevent any other actions on the page until it is closed).

In extjs2, we solved this by creating a class that extends Ext.Window, and creates a new div at the top of the page, and sets the applyTo to that Element.

However, in extjs3 (3.2.2 to be exact), it appears to only half listen to the applyTo directive. The window is drawn not at the page level, but still bound to the panel. But if modal:true, the modal mask is drawn at the top level, and the entire page becomes unusable.

I'm including code below that demonstrates the problem:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>TopWindow Test</title>
		
		<link rel="stylesheet" type="text/css" href="/extjs/ext-3.2.2/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="/ext.seguetech3/resources/css/blue.css" />

		<script type="text/javascript" src="/extjs/ext-3.2.2/adapter/ext/ext-base-debug.js"></script>
		<script type="text/javascript" src="/extjs/ext-3.2.2/ext-all-debug.js"></script>

		<!-- set the blank url --> 
		<script type="text/javascript">
			Ext.BLANK_IMAGE_URL = '/extjs/ext-3.2.2./resources/images/default/s.gif';

			Ext.namespace('Ext.ux');

			Ext.ux.TopWindow = function(config) {
				Ext.apply(this,config);
				// create a new div for this window instance to apply to.
				this.element = Ext.DomHelper.insertFirst(Ext.DomQuery.select("BODY")[0],[{tag: "div"}],true);
				this.applyTo = this.element;
	
				Ext.ux.TopWindow.superclass.constructor.call(this);
			};

			Ext.extend(Ext.ux.TopWindow, Ext.Window, {}); 


			Ext.onReady(function(){
				window['myform1'] = new Ext.form.FormPanel({
					title:'TopWindow Test',
					renderTo:'form1',
					height:320,
					tbar: [
						{text: 'TopWindow',handler: function() {Ext.getCmp('form1Window').show();}},
						{text: 'Modal TopWindow',handler: function() {Ext.getCmp('form1ModalWindow').show();}}
					],
					items:[
						new Ext.ux.TopWindow({
							title:'TopWindow',
							html:'This window should appear at the top level, not bound to the FormPanel.',
							id:'form1Window',
							modal:false,
							shadow:true,
							border:true,
							frame:true,
							height:300
						}),
						new Ext.ux.TopWindow({
							title:'Modal TopWindow',
							html:'Although this window should appear at the top level, it does not.<br>But the modal mask does, preventing any further page interaction.',
							id:'form1ModalWindow',
							modal:true,
							shadow:true,
							border:true,
							frame:true,
							height:300
						})

					]
				});
			});
		</script>
	</head>
<body style="align:center;">
	<div id="form1" style="width:320px; margin-left:20px;margin-top:20px;"></div>
</body>
</html>