Design patterns 容器层次结构中的模式窗口是否为错误模式？

extjswebapp

我们有一个复杂的全屏布局，它有一个窗体。表单有一个自定义字段组件，用于启动一个窗口，该窗口有其他需要发布的表单字段，因此我们将该窗口设置为父窗口，使其成为表单面板的后代。当我们设置modal:true时，我们只在窗口所属的面板上获得一个模态掩码（good），但是模态掩码大小错误，导致窗体上的滚动条不正确

如果您查看模态窗口的掩码实现[1]，很明显模态窗口并不打算屏蔽整个页面之外的任何内容。我通常同意Extjs的实现细节，这让我想知道子面板中的模态窗口是否有我看不到的设计或可用性挑战

---

[1]

如果有人在这里用谷歌搜索，我们会继续黑客攻击对模态窗口的支持，这很容易，我不认为会有问题

// 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();
    }
});