Extjs - 在視口中拖動窗口

Question

我有一個視口，在中心區域內有一個窗口。 當我嘗試將窗口移動到中心區域的頂部時，窗口不會保留在頂部。我注意到窗口位於北部地區的頂部+高度。

這是代碼：

Ext.onReady(function(){ 

    Ext.create('Ext.container.Viewport', { 

     layout: 'border', 
     forceFit: true, 
     hideMode: 'offsets', 
     items: [ 
     { 
      region:'north', 
      id:'btns', 
      height: 150, 
      layout: 
      { 
       type: 'hbox', 
       padding:'5', 
       align:'stretch' 
      }, 
      items:[] 
     }, { 
      region: 'east', 
      autoScroll: true, 
      border: false, 
      items:[{ 
       xtype: 'container', 
       id: 'page_gauche1', 
       width: 500, 
       height: 920, 
       border: false 
      }] 
     }, { 
      region: 'center', 
      id: 'center', 
      autoScroll: true, 
      border: true, 
      items: { 
       xtype: 'container', 
       id: 'page_gauche4', 
       width: 1400, 
       height: 920, 
       border: false, 
       hidden: true 
      } 
     }] 
    }); 

    Ext.create('Ext.Window', { 

     layout: 'fit', 
     border: false, 
     header: true, 
     draggable: true, 
     resizable: true, 
     autoShow: true, 
     constrain: true, 
     renderTo: 'center', 
     width: 300, 
     height: 200 
    }); 

}); 

Answer 1

窗口是你不應該在這裏使用renderTo浮動組件！另外，如果可以避免的話，你不應該自己設置id！

對不起？

Fiddle

{ 
    region: 'center', 
    id: 'center', 
    autoScroll: true, 
    border: true, 
    items: { 
     xtype: 'container', 
     id: 'page_gauche4', 
     width: 1400, 
     height: 920, 
     border: false, 
     hidden: true 
    }, 
    listeners: { 
     boxready: function(self) { 
      Ext.create('Ext.Window', { 
       layout: 'fit', 
       border: false, 
       autoShow: true, 
       constrain: true, 
       constrainTo: self.getEl(), 
       width: 300, 
       height: 200 
      }); 
     } 
    } 
}