Using drag-and-drop between two grids

If you have worked with data mining and analysis interfaces, you have probably seen the application of drag-and-drop feature between two grids. This recipe explains how you can enable drag-and-drop between two grids in Ext JS.

The example uses a Movies grid and a Selected Movies grid, as shown in the next screenshot:

If you drag the selected rows in the Movies grid and drop them in the Selected Movies grid, the grids' data stores will be updated to reflect the changes:

How to do it...

1. 1. Create fields for the two data stores used:

   var sharedFields = ['film_id', 'title', 'rating',
   { name: 'length', type: 'int' },
   { name: 'price', type: 'float' }
   ]
   

2. 2. Create a data store for the available movies grid:

   var moviesStore = new Ext.data.JsonStore({
   url: 'grid-to-grid-drag-drop.php',
   root: 'movies',
   totalProperty: 'count',
   baseParams: { action: 'movies' },
   fields: sharedFields
   });
   

3. 3. Create a data store for the selected movies grid:

   var selectedMoviesStore = new...