はコンテナ階層のモーダルウィンドウであり、悪いパターンですか？

Question

extjs webapp。

私たちは複雑なフルスクリーンレイアウトを持っています。これはフォームを持っています。フォームにはウィンドウを起動するカスタムフィールドコンポーネントがあり、ウィンドウにはポストする必要のある追加のフォームフィールドがあるため、フォームパネルの子孫であるようにウィンドウを親にします。モーダル：trueを設定すると、ウィンドウは（良い）が所有しているが、モーダルマスクのサイズが間違っているので、フォーム上に不適切なスクロールバーが表示されるだけで、モーダルマスクが表示されます。

モーダルウィンドウのマスク実装[1]を見ると、モーダルウィンドウはページ全体以外をマスクするものではないことは明らかです。私は通常、Extjsの実装の詳細に同意します。サブパネルのモーダルウィンドウには、私が見ていないデザインやユーザビリティの課題があるのではないかと思います。

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

Answer 1

誰もがここで自分の道をグーグルの場合、私たちは先に行って、モーダルウィンドウのサポートにハッキング、それは簡単だったと私は問題をforseeません。

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