модальные окна в иерархии контейнера - это плохая модель? - PullRequest
Новая
       15

модальные окна в иерархии контейнера - это плохая модель?

0 голосов
/ 07 августа 2011

extjs webapp.

у нас сложная полноэкранная компоновка, которая имеет форму.форма имеет компонент настраиваемого поля, который запускает окно, окно имеет дополнительные поля формы, которые необходимо опубликовать, поэтому мы родительское окно, так что он является потомком панели формы.когда мы устанавливаем modal: true, мы получаем модальную маску только для панели, которой принадлежит окно (хорошо), но модальная маска имеет неправильный размер, вызывая неподходящие полосы прокрутки в форме.

, если вы посмотритепри реализации маски модального окна [1] совершенно ясно, что модальные окна не предназначены для маскировки чего-либо, кроме всей страницы.Я обычно согласен с деталями реализации Extjs, что заставляет меня задаться вопросом, есть ли у модальных окон в подпанелях проблемы с дизайном или удобством использования, которые я не замечаю?

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

1 Ответ

0 голосов
/ 08 августа 2011

Если кто-нибудь погуглит здесь, мы пошли дальше и взломали поддержку модальных окон, это было легко, и я не вижу проблем.

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