Extjs - Dragging window in Viewport - extjs

Question

I got a viewport and within the center region a window.
When I try to move the window to the top of the center region, the window doesn't stay on the top.
I note that the window is positioned at the top + the height of the north region.
This is the code:
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

A window is a floating component you should not use renderTo here! In addition you should never set the id on your own if it can be avoided!
Do you this?
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
});
}
}
}