PDA

View Full Version : Show popup window from a popup window



bjnelson62
10 Jan 2013, 6:49 AM
I have a function which I use to display a popup window. It's been working fine for some time.

But now I want to display a second popup from the first. What's happening is sometimes the second window appears below the first, but in any case the second window is always messed up. It neither looks right nor works correctly (controls out of place, unresponsive, etc).

I originally wrote the function in response to a menu click handler, but now I'm calling it from a button in this new form (each popup window is a Window that contains a Form).

I thought maybe the problem was I wasn't setting an ID on the windows, so I added that, but it didn't help.

So the basic question is, can one do this? Launch a modal window from a modal window? If so, what's the correct way?

I've tried a bunch of different things, and searched high and low, but I've been unable to come up with a working solution.

Maybe browsers only allow one popup window at a time; in which case, I suppose I could save the form in the current window (Window.remove()), destroy the window, and create a new window with the new form. When that window is closed, destroy it and re-instate the old form in a new window. That's a lot of of work for something so simple, though.

Here's a shortened version of my function:



showFormForMenu: function(menuItemId) {
var win, formTitle, formPanel,
num = this.NUM_MODAL_WIN++;


if (menuItemId == Globals.MAIN_NEWGROUPMENU_ID) {
formTitle = "New Group";
formPanel = Ext.create('VFABRIC.form.NewGroupFormPanel');
}
else if (menuItemId == Globals.MAIN_QUICKSTARTWIZARDMENU_ID) {
formTitle = "Quick Start Wizard";
formPanel = Ext.create('VFABRIC.form.QuickStartWizardFormPanel');
}
else {
return;
}


win = Ext.create('Ext.window.Window', { //new Ext.widget('window', {
title: formTitle,
closeAction: 'destroy',
width: 400,
height: 400,
layout: 'fit',
id: this.MODAL_WIN_ID + num,
resizable: true,
autoScroll: true,
modal: true,
items: formPanel,
});

win.show();
},


Thank you,

Brian

friend
10 Jan 2013, 7:55 AM
This is a rather simplistic test, but it seems to work as advertised:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

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

<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.window.Window', {
height: 200,
modal: true,
width: 400,
buttons: [{
text: 'Make Modal',
handler: function() {
Ext.create('Ext.window.Window', {
height: 100,
modal: true,
width: 200
}).show();
}
}]
}).show();
});
</script>
</head>
<body>
</body>

</html>

bjnelson62
10 Jan 2013, 8:10 AM
Thanks, but I'm afraid that's not the problem I'm having. Both windows come up just fine. just as in your simple test; it's the form inside the second window that's messed up.

I guess I'll try putting a simple form into that simple test, and see how it fares.

bjnelson62
10 Jan 2013, 8:22 AM
My previous response made me think that perhaps I was giving id's to the wrong thing. So I added id's and itemId's to each form.

Unfortunately, the second form is still messed up when shown inside a second modal window.

friend
10 Jan 2013, 10:03 AM
I added a Form panel to each modal window and some test fields, just to get a little closer to what you're doing. For the heck of it, I also removed the height/width from both windows and let them figure out their content size.

Note that I don't declare a layout on either window and just let them default to 'auto'. I did however use an anchor layout on the forms with no size declaration on the form fields (which is most probably a bad practice, but I thought it would throw more complexity at the layout manager).

It still seems to work as expected, which makes me think that some other parent container or layout bits may be biting you.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

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

<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.window.Window', {
bodyPadding: 5,
modal: true,
title: 'Parent Modal Window',
items: [{
xtype: 'form',
bodyPadding: 5,
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'lastName'
},{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'firstName'
}]
}],
buttons: [{
text: 'Make Modal',
handler: function() {
Ext.create('Ext.window.Window', {
modal: true,
title: 'Child Modal Window',
items: [{
xtype: 'form',
bodyPadding: 5,
layout: 'anchor',
items: [{
xtype: 'textfield',
fieldLabel: 'SSN',
name: 'ssn'
},{
xtype: 'datefield',
fieldLabel: 'B-day',
name: 'bday'
}]
}]
}).show();
}
}]
}).show();

});
</script>
</head>
<body>
</body>
</html>

bjnelson62
10 Jan 2013, 10:20 AM
I did the same thing, almost exactly. :-)

I added a form to each window, and a couple of textfields to each form. All looked good.

That got me thinking, what's different with what I'm doing? I *think* I figured it out.

I have a combobox class that I use in all my forms, and that's the thing that I think is getting messed up.

I add the combobox into each form like this:

items: [
{
xtype: 'mycombobox',
}

I took a look at my combobox code, and noticed I had defined an id and itemId for the class, even though they're not used. I commented out those lines, and now it works!

Any idea why that would be? It doesn't make sense to me that defining an ID should cause problems.

friend
10 Jan 2013, 10:30 AM
You are correct; a duplicate ID on multiple components can/will wreak havoc on layout. Good catch!

If your combo is used in the forms of both windows, I assume that the duplicate ID is causing the rendering/layout engine to try and lay things out based on the first DOM object instance with the specified ID. There's just no telling what manner of problems this can cause the layout engine.

:]

bjnelson62
10 Jan 2013, 12:24 PM
Thanks for the info, I appreciate it.

I have a tendency to assign ID's to things; in the past it helped to keep track of things. But in JavaScript and ExtJS-land, it seems to cause more problems than it solves.

I guess I would have thought that when the new instance was instantiated, the system would see it for what it was -- a new instance of a class. But it seems like those ID's are treated like they're written in stone and to be obeyed above all else.

I'm starting to assign 'name' to forms and children of forms, that seems to work better.