ExtJS – How to scroll Ext.Panel by Drag and Drop ?

In an ExtJS panel (Ext.Panel) where the content area is huge but the Panel size is limited,
users usually use the MouseWheel to scroll vertically Up and Down.
However, the Drag n Drop feature could actually allow users to scroll both vertically and horizontally by dragging and dropping the content (or body) of Ext.Panel.

In this entry, I’ll walk you guys through a simple implementation of scrolling Ext.Panel
Vertically and Horizontally by Dragging and Dropping using Ext.dd.DragZone.

Examples of sites having this feature:
1. maps.google.com (Use .png files for hand cursors)
2. gothere.sg (Use .cur files for hand cursors)

In these cases, users don’t need to manually move the mouse to the horizontal / vertical scrollbars and slide them, they could do the scrolling by just dragging the content around. The map implementation is a typical example.

I wrapped this panel together with the DragZone in a simple Panel extension.

The main idea is create CSS classes to show the hand icons when users move and drag the panel body:

.x-panel-wrap-dd-area {
 cursor: url(../images/open_hand.cur), pointer;        /* Show open_hand cursor */
 -moz-user-select: none;                                /* Disable text selection */
 -webkit-user-select: none;

.ext-ie .x-panel-wrap-dd-area {
 cursor: url(images/open_hand.cur), pointer;            /* Show open_hand cursor */

.x-panel-wrap-dd-area-scrolling {
 cursor: url(../images/closed_hand.cur), pointer;    /* Show closed_hand cursor */

.ext-ie .x-panel-wrap-dd-area-scrolling {
 cursor: url(images/closed_hand.cur), pointer;        /* Show closed_hand cursor */

You can have a look at the Demo page and the source code. :D



, , , , ,