Window rendering in a panel

[sumith.paul]

I have been spending a couple of days trying to restrict a window rendered inside a panel .I used constrain:true param..But cant get it restricted completely within the panel.Yes..I can restrict it at top and both side ways,but not at bottom.Some kind of light would be of great help..Also how to define a drag/drop event handlers for window,other than the regular 'move' event.

[sumith.paul]

Here is the code I have had no luck with..


var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: 'border',
items: [{
region: 'west',
width: 200,
collapsible: true,
collapsed: true,
html: 'West Region'
}, {
region: 'center'
}, {
region: 'east',
width: 200,
collapsible: true,
collapsed: true,
html: 'East Region'
}, {
region: 'south',
height: 50,
html: 'South Region'
}],
listeners:{
'afterrender':function(){
var win = Ext.create('Ext.window.Window', {
renderTo: this.layout.regions.center.getEl(), // using renderTo
width: 400,
height: 300,
title: 'Test',
constrain:true,
constrainHeader: true
}).show;

}
}
});

[sword-it]

Here is the code I have had no luck with..



var win = Ext.create('Ext.window.Window', {
renderTo: this.layout.regions.center.getEl(), // using renderTo
width: 400,
height: 300,
title: 'Test',
constrain:true,
constrainHeader: true
}).show;



Are you missing this:-
}).show();

Also you may try draggable:false, by which window can not be dragged (moved).

[sumith.paul]

Yes..i missed 'show()'..but that wont fix my problem..Also I need to drag it inside a panel.So cant keep draggable = false..

[sumith.paul]

Fixed it recently.
Removing constrainHeader:true did the trick

[sumith.paul]

sorry..missed out one more thing

constrain:true
constrainTo: the div

remove
constrainHeader:true