Question

I have an EXT JS window. I have set it to as draggable =true. But i only want it to be dragged not all around the screen but within a limited portion of the screen. Like 2 CM(centimeters) to the left or Right. and 2 CM up and down.

How can i achieve this ?

Answer 1

You can use the constrain config on window to have it be constrained to its parent element. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-constrain . By default Windows render to the document body so in order to constrain to a particular element you can create a parent that has a window in it.

var win = new Ext.window.Window({
    height: 200,
    width: 200,
    constrain: true
});
Ext.create('Ext.container.Container', {
    style: 'border: 1px solid black;',
    height: 400,
    width: 400,
    renderTo: Ext.getBody(),
    items: [win]
});
//Don't forget to call show, windows are hidden by default 
// and even when hidden:false it didn't render in 4.1.1
win.show();