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