Results 1 to 8 of 8

Thread: MessageBox.confirm doesnt stop in some cases

  1. #1
    Ext User
    Join Date
    Jan 2009
    Location
    Lecce, Italy
    Posts
    3

    Default MessageBox.confirm doesnt stop in some cases

    Hi ExtJs Developers and Users,

    I'm a newbie to ExtJs. I searched around all forums to find a solution to this problem so I'm sorry if I'm posting a known topic.

    I'm trying to handle the "beforeremove" event on a TabPanel. If I render the TabPanel directly to the document body everything works perfect. A Dialog appears and blocks until the user presses a button. But (this is my problem) if the TabPanel is embedded into an Ext.Window the Dialog appears for a fraction of a second then suddenly disappers!

    Here I posted the two code snippets. The first works fine while the second presents the problem. Why the Dialog disappears in the second case?

    This snippet is ok (here TabPanel is rendered directly to document body):
    Code:
        var tabs = new Ext.TabPanel({
          renderTo : document.body,
          listeners: {
            'beforeremove': function(container, component) {
              Ext.Msg.confirm('Confirm Action', 'Message', function(btn) {
                if(btn == 'yes'){
                    return true;
                }
              }, this);
                    return false;
            }
          },
          items     : [{
            title    : 'A Tab',
            closable : true
          }]
        });
    While this doesn't works (the TabPanel is embedded into the Ext.Window).
    Code:
        var tabs = new Ext.TabPanel({
          renderTo : document.body,
          listeners: {
            'beforeremove': function(container, component) {
              Ext.Msg.confirm('Confirm Action', 'Message', function(btn) {
                if(btn == 'yes'){
                    return true;
                }
              }, this);
                    return false;
            }
          },
          items     : [{
            title    : 'A Tab',
            closable : true
          }]
        });
        var win = new Ext.Window({
          layout   : 'fit',
          renderTo : document.body,
          items    : [tabs]
        });
        win.maximize();
        win.show();
    I'm using Firefox ver. 2.0 on Ubuntu Linux. I have Firebug installed.

    Thanks in advance.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    What gave you the impression that the first one works? Neither one does!

    Try:
    Code:
    var tabs = new Ext.TabPanel({
    	...
    	listeners: {
    		beforeremove: function(container, component) {
    			if(container.allowRemove){
    				delete container.allowRemove;
    				return true;
    			}
    			Ext.Msg.confirm('Confirm Action', 'Message', function(btn) {
    				if(btn == 'yes'){
    					container.allowRemove = true;
    					container.remove(component);
    				}
    			});
    			return false;
    		}
    	}
    });

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Javascript does not stop.

    Except in alert, use of which is discouraged.

  4. #4
    Ext User
    Join Date
    Jan 2009
    Location
    Lecce, Italy
    Posts
    3

    Default

    Thanks for your response guys!

    The first snippet (with the TabPanel rendered directly to the document body) works
    perfectly to me! Anyway tanks for the useful suggestions Condor (but also with your
    changes the Dialog still doesn't work).

    Animal, I know javascript does not stop. What I understood is
    that the callback function of the MessageBox is responsible to handle the events.
    But this messageBox handler is never reached because the user can't click on the Dialog!
    The MessageBox disappears immediately on one half of a second after the call to
    MessageBox.confirm function call!

    The effect I want is like te following with the "beforeclose" event handled for
    an Ext.Window that works perfectly.

    Code:
        var win = new Ext.Window({
          layout   : 'fit',
          renderTo : document.body,
          listeners: {
            'beforeclose': function(container, component) {
              Ext.Msg.confirm('Confirm Action', 'Message', function(btn) {
                if(btn == 'yes'){
                    return true;
                }
              }, this);
                    return false;
            }
          },
        });
    This code shows me a Dialog that stop other actions (not javascript) disabling
    input on other elements on the body different by the Dialog. Then after the
    User presses a button the callback is called. The problem with the TabPanel
    is that after the MessageBox.confirm is called it appears for only a fraction of a second
    then disappears. I don't know why! I'm using exactly the same event handling
    as the Ext.Window example I shown before where everything works! Where I'm wrong?

    I forgot to say I'm using Ext ver. 2.2.

    Thanks again

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    So, you actually did not understand that javascript does not stop.

    Read your code.

    The listener function to the beforeclose event returns immediately because as you claim to know, javascript does not stop. So the Window closes.

    Later, when the button clickevent of the Button in the message Window is clicked, the callback is called. But so what? The Window has closed by then!

    Read your code, follow the flow of execution. Dry run it in your head. You can see what happens.

  6. #6
    Ext User
    Join Date
    Jan 2009
    Location
    Lecce, Italy
    Posts
    3

    Thumbs up

    I discovered the problem Animal. The fact is that the Dialog appears but on a z-index lower than the one of the Window so it appears for a moment then becomes invisible. But it is still there!

    If I do not maximize the Ext.Window (that I use as the tabPanel container) I can see this clearly.

    the effect is clear in this code, very similar to the prevois one but a bit refactored.
    Code:
    Ext.onReady(function(){
      tabs = new Ext.TabPanel({
        id: 'tabpanel',
        listeners: {
          'beforeremove': removeTabHandler
        },
        items     : [{
          title    : 'A Tab',
          closable : true
        }]
      });
      mywin = new Ext.Window({
        applyTo     : "win",
        layout      : 'fit',
        width       : 500,
        height      : 300,
        bodyBorder : true,
        border: true,
        items: [tabs]
      });
      // mywin.maximize(); // if you maximize you will see the effect of the dialog that disappears after one half of a second
      mywin.show();
    });
    
    function removeTabHandler(tabpanel, tab) {
      dlg = Ext.Msg.confirm(
        'Remove?', 'Sure?',
        function(btn, text) {
          if(btn == 'yes') {
            tabpanel.un('beforeremove', removeTabHandler);
            tabpanel.remove(tab);
          }
        }
      );
      return false;
    }
    you will see the Dialog under the Window.

    I solved using the solution in this post: http://extjs.com/forum/showthread.php?t=21981

    the proposed solution is:
    Code:
    var errMsgWdwGrp = new Ext.WindowGroup();
    errMsgWdwGrp.zseed = 1000000;  
    var msg = Ext.MessageBox.show( {
       .....
    });
    msg.getDialog().manager = errMsgWdwGrp;
    Ext.WindowMgr.bringToFront(msg.getDialog());
    I still don't know why this MessageBox has this incorrect (for me) z-index.
    But the previous solution worked for me giving my MessageBox the correct z.index.

    Thanks for your help!

    Andrea

  7. #7
    Ext User Righi's Avatar
    Join Date
    Dec 2009
    Location
    SP, Brasil
    Posts
    12

    Default

    What the hell is this "allowRemove"?

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    It's a temporary flag used only by this code fragment to indicate that confirmation has already been given.

Posting Permissions

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