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
Cheers,
Totti