Results 1 to 8 of 8

Thread: Show popup window from a popup window

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default Answered: Show popup window from a popup window

    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:

    Code:
        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

  2. 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.

    :]

  3. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    This is a rather simplistic test, but it seems to work as advertised:

    Code:
    <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>

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    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.

  5. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    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.

  6. #5
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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.

    Code:
    <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>
    Last edited by friend; 10 Jan 2013 at 10:29 AM. Reason: grammar

  7. #6
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    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.

  8. #7
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    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.

    :]

  9. #8
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •