One of the great things about drag-and-drop in Ext JS is that you can use it with many of the supplied Ext Components without having to delve into the guts of how they work. We're going to examine the use of drag-and-drop to create a master-detail layout with an Ext.DataView and an Ext.FormPanel. This way, we can demonstrate the integration of drag-and-drop with commonly-used components. Much of what we're going to cover will be familiar to you from our previous example, but the application of that knowledge will be slightly different.
We're going to be working with some very simple HTML:
<div id="people"></div> <div id="detail"></div>
The people <div> will contain our DataView, listing a group of people pulled from a store. The detail <div> will contain the form that we can drag items onto.