Results 1 to 8 of 8

Thread: [4.0.5] Window modal broken in sandbox

    You found a bug! We've classified it as EXTJS-3922 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default [4.0.5] Window modal broken in sandbox

    If I open a window with modal in ext-4.0.5 sandbox mode the calculation of the window mask height and top are wrong. In ext-4.0.2 it works.


    ext-4.0.6 too

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    First Error found ...

    In Ext-4.0.2 the modal was bind direct to the body. This changed and it now binds to parent el.
    Thats still ok but in the sandbox are one more element. All Components have a div with the x4-reset but the modal do not know that.

    My solution is following:

    Code:
    Ext4.override(Ext4.ZIndexManager, {
        _showModalMask1: function(comp) {
            var zIndex = comp.el.getStyle('zIndex') - 4,
                maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : Ext4.get(comp.getEl().dom.parentNode),
            parentBox = maskTarget.getBox();
        
            if (
                Ext4.isSandboxed && 
                maskTarget.dom && 
                maskTarget.dom.tagName && 
                maskTarget.dom.tagName.toUpperCase() == "DIV"
            ) {
                Ext4.each(maskTarget.dom.classList, function(clsTemp) {
                    maskTargetParentTemp = Ext4.get(maskTarget.dom.parentNode)
                    
                    if (
                        clsTemp == Ext4.baseCSSPrefix + 'reset' &&
                        maskTargetParentTemp.dom && 
                        maskTargetParentTemp.dom.tagName && 
                        maskTargetParentTemp.dom.tagName.toUpperCase() == "BODY"
                    ) {
                        maskTarget = maskTargetParentTemp;
                        parentBox = maskTarget.getBox();
                    }
                });
            }
            
            if (!this.mask) {
                this.mask = Ext4.getBody().createChild({
                    cls: Ext4.baseCSSPrefix + 'mask'
                });
                this.mask.setVisibilityMode(Ext4.Element.DISPLAY);
                this.mask.on('click', this._onMaskClick, this);
            }
            
            if (maskTarget.dom === document.body) {
                parentBox.height = Ext4.Element.getViewHeight();
            }
            maskTarget.addCls(Ext4.baseCSSPrefix + 'body-masked');
            this.mask.setBox(parentBox);
            this.mask.setStyle('zIndex', zIndex);
            this.mask.show();
        }
    });
    This solve the Problem with modal of Windows.

    But there is an other Problem with Grids. The LoadMask of Grids are rendered to body and have the wrong z-index, because they are rendered as modal and get the z-index of there parent - 4. Height and top are fine. I think that they never have to be rendered as model because the z-index - 4 bring them always to background.

  3. #3
    Sencha User edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939

    Default

    Ok I'll ask Thomas to take a look at this thread, sounds like a relatively easy one to patch up for 4.0.7
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    Thanks,

    for issue number two i have a fix which is not nice but it works for the moment.

    I add

    Code:
    if (comp.isXType('gridpanel')) {
        zIndex + 4;
    }
    after var init in "_showModalMask"

    it works but i do not feel god with it...

    the fix above do not work searching for fix ...
    Last edited by Snaker; 1 Sep 2011 at 12:20 AM. Reason: fix do not work

  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    This fix works for temp ...

    Code:
    if (comp.isXType('loadmask')) {
        zIndex = zIndex + 3;
    }
    but i do not happy with this solutuion
    Last edited by Snaker; 1 Sep 2011 at 12:33 AM. Reason: change +4 to +3 because loading text was behind loadmask

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    OK solution update

    with following code it works in ie6-9 too and is a little bit smarter too.

    Code:
    Ext4.override(Ext4.ZIndexManager, {
        _showModalMask: function(comp) {
            var zIndex = comp.el.getStyle('zIndex') - 4,
                maskTarget = comp.floatParent ? comp.floatParent.getTargetEl() : Ext4.get(comp.getEl().dom.parentNode),
                parentBox = maskTarget.getBox();
               
            if (Ext4.isSandboxed) {
                if (comp.isXType('loadmask')) {
                    zIndex = zIndex + 3;
                }
                
                if (
                    maskTarget.hasCls(Ext4.baseCSSPrefix + 'reset') &&
                    maskTarget.is('div')
                ) {
                    maskTargetParentTemp = Ext4.get(maskTarget.dom.parentNode)
                    if (maskTargetParentTemp.is('body')) {
                        maskTarget = maskTargetParentTemp;
                        parentBox = maskTarget.getBox();
                    }
                }
            }
            
            if (!this.mask) {
                this.mask = Ext4.getBody().createChild({
                    cls: Ext4.baseCSSPrefix + 'mask'
                });
                this.mask.setVisibilityMode(Ext4.Element.DISPLAY);
                this.mask.on('click', this._onMaskClick, this);
            }
            
            if (maskTarget.dom === document.body) {
                parentBox.height = Ext4.Element.getViewHeight();
            }
            maskTarget.addCls(Ext4.baseCSSPrefix + 'body-masked');
            this.mask.setBox(parentBox);
            this.mask.setStyle('zIndex', zIndex);
            this.mask.show();
        }
    });

  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Dsseldorf, Germany
    Posts
    40

    Default

    Next one...

    if i have a scrolling page the modal have the height of view. That have the result that if I scroll down the modal ends in middle of page and the rest of page is free to use (like click buttons or anything else)

    and again my favourit function "_showModalMask"

    following code set wrong height:
    Code:
    if (maskTarget.dom === document.body) {
        parentBox.height = Ext4.Element.getViewHeight();
    }
    SOLUTION:
    Code:
    if (maskTarget.dom === document.body) {
        parentBox.height = maskTarget.getHeight();
    }

  8. #8
    Sencha User
    Join Date
    May 2011
    Location
    Fremont, CA
    Posts
    5

    Lightbulb

    I'll be working on this issue soon. Thanks for the bug report!

Posting Permissions

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