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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    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
  •