PDA

View Full Version : Snapping Windows v2



skhameneh
7 Nov 2011, 2:50 PM
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 ExtJS 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. (Not working in ExtJS 4 version)
Adds snapLeft() and snapRight() functions to the Ext.Window component.
Unsnapping windows will position them relative to the original cursor position on the title bar. (v2 only)
Supports autoloading (v2 only)
http://extraordinarythoughts.com/2011/08/17/extjs-snapping-windows/

davidkaneda
7 Nov 2011, 4:20 PM
Sounds very cool — Any link to a live demo? Didn't see one on the blog post...

skhameneh
9 Nov 2011, 7:28 PM
Thanks David, I saw you message Monday, but just now had some time to add a demo.

http://extraordinarythoughts.com/code/ext-4.0.7/examples/snapwindows/