are modal windows in a container hierarchy a bad pattern?

Question

extjs webapp.

we have a complex full screen layout, which has a form. the form has a custom field component which launches a window, the window has additional form fields that need to post, so we parent the window such that he is a descendent of the form panel. when we set modal:true, we get a modal mask over just the panel which the window is owned by (good) but the modal mask is sized wrong, causing inappropriate scroll bars on the form.

if you look at the modal window's mask implementation[1], it's quite clear that modal windows are not intended to mask anything other than the entire page. I usually agree with the Extjs implementation details, which makes me wonder if modal windows in sub-panels have design or usability challenges that I don't forsee?

[1] http://www.sencha.com/forum/showthread.php?141901-are-modal-windows-inside-a-container-a-bad-idea&p=630526#post630526

Dustin Getz Dustin Getz · Accepted Answer · 2011-08-08T15:49:54

if anyone googles their way here, we went ahead and hacked in support for modal windows, it was easy and i don't forsee problems.

// developed and tested against Ext 3.3.3
djg.ContainedModalWindow = Ext.extend(Ext.Window, {

    // *djg* new method
    sizeMask: function() {
        if (this.ownerCt) {
            // mind was blown at first, but no-op here works.
            // it looks like the dom gets sized just fine automatically
            // if there is a container hierarchy with a layout.
            // we just have to prevent Ext from overriding it below.
        }
        else {
            // normal Ext 3.3.3 behavior
            this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
        }
    },

    // private
    beforeShow : function(){
        delete this.el.lastXY;
        delete this.el.lastLT;
        if(this.x === undefined || this.y === undefined){
            var xy = this.el.getAlignToXY(this.container, 'c-c');
            var pos = this.el.translatePoints(xy[0], xy[1]);
            this.x = this.x === undefined? pos.left : this.x;
            this.y = this.y === undefined? pos.top : this.y;
        }
        this.el.setLeftTop(this.x, this.y);


        if(this.expandOnShow){
            this.expand(false);
        }


        if(this.modal){
            Ext.getBody().addClass('x-body-masked');
            this.sizeMask(); // *djg*
            this.mask.show();
        }
    },

    // private
    onWindowResize : function(){
        if(this.maximized){
            this.fitContainer();
        }
        if(this.modal){
            // begin *djg*
            //this.mask.setSize('100%', '100%');
            //var force = this.mask.dom.offsetHeight;
            //this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
            this.sizeMask(); 
            // end *djg*
        }
        this.doConstrain();
    }
});

are modal windows in a container hierarchy a bad pattern?

1 Answers