1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    0
    chulochula is on a distinguished road

      0  

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

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    60
    Vote Rating
    0
    chulochula is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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 @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar