Results 1 to 4 of 4

Thread: A floating Panel underneath a Ext.MessageBox is still clickable

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    0
      0  

    Default A floating Panel underneath a Ext.MessageBox is still clickable

    If a Panel is floating (no matter modal or not) and then a message box popped up on top of it, the panel is still clickable as if the message box is not modal. However, if the Panel is not floating, then the message box can block mouse clicks outside it. Any solution please?

    Code:
    Ext.setup({
        onReady: function() {
            var win = new Ext.Panel({
                floating: true,  // problem
                modal: true,   // problem
                //fullscreen: true,   // no problem
                hideOnMaskTap: false,
                centered: true,
                width: 260,
                height: 260,
    
    
                html: 'After msg box shown, the button is still clickable, unless it is not floating',
                items: [
                	{xtype:'button',
                		text: 'click me',
                		ui : 'round',
                		hidden: false,
                		handler: function(){
                		Ext.Msg.alert('Tap OK.')},
                		scope: this
                	},{xtype:'button',
                		text: 'click 2nd',
                		ui : 'round',
                		hidden: false,
                		handler: function(){
                		win.hide()},
                		scope: this
                	}
              
      
                ]
            });
    		win.show();
        }
    });

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,026
    Answers
    3976
    Vote Rating
    1367
      0  

    Default

    This is due to the fact that the .x-floating CSS rule is using z-index: 10000 !important while the mask is using z-index: 8000 !important so the mask will be behind any floating component like a Panel and MessageBox.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    0
      0  

    Default

    Thanks! But any suggested solutions please?

    Because on the floating panel there is a 'Delete' button, I have to prompt user for confirmation before doing the real deletion. Or, anyway to make the floating panel and all of contained components to ignore mouse clicks?

  4. #4
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,026
    Answers
    3976
    Vote Rating
    1367
      0  

    Default

    Two ways to do this... Since it's CSS that handles this, you can create update the mask's z-index for the Ext.Msg. Or you can mask the panel's el using panel.el.mask
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Posting Permissions

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