View Full Version : Setting a fixed top style for window/panel ,and also enable Dragging

20 Jan 2014, 4:17 AM
I need to adjust the
style: { top : '100px'} of a window on initial page load.
This seems to work if I do a
style: { top : '100px !important'} in the window's configs.
However, I need the window to be draggable. What happens when I set a style:top config is, on dragging, the window drags itself back to the initial vertical position it was in. This is natural, since I have overridden the top property.
Any solution/suggestion, which could enable both fixed top position initially and then dynamic change of top value on dragging possible ? Please suggest

20 Jan 2014, 6:07 AM
you can do it easily using the x and y configs:

x: 200, // if you also want horizontal positioning
y: 100 // for vertical positioning (which you asked for)

this sets the initial position of the window. you can then drag it to another position.

20 Jan 2014, 6:50 AM
@Farish solution looks simplest and easiest to use.

You can also do something like this:

var win = Ext.create('Your.ui.YourWindow');//Your window creation here
win.alignTo(this, "tl-tl", [100, 1000]);
//100 top and 100 left from top left corner of Your container

Read more about alignTo here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.util.Positionable-method-alignTo

20 Jan 2014, 9:55 PM
Thanks Farish! It worked. I should have gone through the configs! :)