PDA

View Full Version : Windows 7 style Window Dragging



skhameneh
17 Aug 2011, 10:49 AM
There’s a really useful feature in Windows 7 that allows windows to be resized just by dragging them to edges of the screen. Well, I wanted that feature for an ExtJS desktop environment, so here’s my solution for Windows 7 style window dragging.

The following code overrides some functionality in Ext 3.3.1 and allows windows to be resized in the same manner.
Features:

Windows can be dragged when maximized and will resize when dragged.
Dragging a window (cursor within 20 pixels) to top of container will maximize it.
Dragging a window (cursor within 20 pixels) to left or right of container will resize it to that half of the container.
The window ghost will indicate its new size according to placement when dragging.
Windows will restore to their original size before being snapped.
Adds snapLeft() and snapRight() functions to the Ext.Window component.
Bugs / Quirks:


Windows that initialize maximized will restore to 800×400
Windows that initialize with resizable = false cannot be dragged when maximized.
Maximizing a window when snapped to half the screen will make it resize to half of the screen. (only when using resize button)
Yeah, the quirks can be easily fixed, I just have no immediate need to fix them.

Code & original post:
http://extraordinarythoughts.com/2011/08/17/extjs-snapping-windows/