View Full Version : bringing window to the top

8 Sep 2010, 12:02 PM
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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.ux.TopWindow = function(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.extend(Ext.ux.TopWindow, Ext.Window, {});

window['myform1'] = new Ext.form.FormPanel({
title:'TopWindow Test',
tbar: [
{text: 'TopWindow',handler: function() {Ext.getCmp('form1Window').show();}},
{text: 'Modal TopWindow',handler: function() {Ext.getCmp('form1ModalWindow').show();}}
new Ext.ux.TopWindow({
html:'This window should appear at the top level, not bound to the FormPanel.',
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.',

<body style="align:center;">
<div id="form1" style="width:320px; margin-left:20px;margin-top:20px;"></div>

8 Sep 2010, 12:15 PM
Oh, another thing to note. The modal bit blocks movement and access to the entire window with IE8. IE7 and Firefox still allow the modal window to be accessed/moved around, but only within the formpanel.

8 Sep 2010, 12:42 PM
You cannot use a Window as a child item.

8 Sep 2010, 1:10 PM
I hate to argue the point, but.... I will. Although it doesn't do what I want in extjs3, and it did in extjs2, it is clearly possible to use a Window as a child item (the demo code is example enough that it is possible to do so).

There is no such prohibition in the API docs.

Window's inheritance path looks like this:

According to the definition of Ext.form.FormPanel:items -
Each item may be:
- any type of object based on Ext.Component

Ext.Window extends down the line from Ext.Component, and so is a candidate for being a child item. In fact, Ext.form.FormPanel's items is extended from Ext.Container, so just about any type of Container can have a Window in it.

8 Sep 2010, 1:14 PM
You can't.

Render the Window to whatever element should house it.

8 Sep 2010, 1:42 PM
I can. But it no longer works the way I want. It worked in 2, it doesn't in 3. Guess I was taking advantage of a bug.

It's not like I'm dealing with a new app here, and can just change a few lines of code. This is a very large existing application. We have fixed many smaller compatibility issues with 3 already. This particular problem hits the core of our application though and will block us from being able to upgrade to extjs3, or cause us to have to expend significant resources to rework it, if we can't find a fix/workaround.