Chapter 14. Drag and drop with widgets
This chapter covers
- Learning drag and drop with Ext JS widgets
- Implementing drag and drop with the DataView
- Exercising drag and drop between GridPanels
- Creating two drag-and-drop GridPanels
- Tackling drag and drop with the TreePanel
- Applying TreePanel drag-and-drop restrictions
When developing your projects, it’s easy to produce context Menus and Buttons to perform certain actions, such as moving a Record from one grid to another. But users always crave an easier way to perform those actions. Providing drag and drop behavior to your applications will allow your users to accomplish these tasks much more effectively. The less mouse clicking users have to do, the happier they ultimately are.
In this chapter we’ll explore applying this behavior to the three widgets that drag and drop is commonly used with: DataView, GridPanel, and TreePanel. As we do that, we’ll descend farther into the DragDrop class hierarchy and touch on the DragZone and DropZone classes and their descendants.
You’ll learn about the different implementation patterns that are required to get drag and drop working with each of these widgets, and we’ll discuss some of the hidden tricks and inner workings of the drag-and-drop classes.
Because the nature of this behavior is complex, this will be a code-heavy chapter.