Getting Started With Grid Drag & Drop

This tutorial builds on the demo code included with the Learning ExtJS book, specifically the 7_json_grid.php example from chapter 5 - which can also be downloaded here.

The code for this tutorial can be downloaded here, and a live example is available here.

Were going to implement a fairly simplistic grid drag and drop. This implementation will allow you to drag a row of data to re-order it within the same grid. We will also play with the look of the dragproxy, which is a visual element used to represent the grid row while its in transition.

Getting Started

The first thing we need to do is tell our GridPanel that it's going to be used for drag and drop, this is because the default behavior for a grid is to have no drag and drop functionality (which cuts down on resources, ie: memory). We can enable the drag and drop functionality by setting the enableDragDrop config value to true

enableDragDrop : true

Now that the first step is out of the way, lets move on to defining some of our drag and drop specifics.

D&D Groups

We will need to set the drag and drop group - ddGroup - this is a unique identifier that ExtJS components will use to share their dragged and dropped items. For our example, we are using 'mygrid-dd'. In your case this might be something more along the lines of 'contacts' or 'products' which could be set on multiple components to allow drag and drop between them.

ddGroup : 'mygrid-dd', ddText : 'Place this row.',

Setting those two config options will give us a grid that allows rows to be dragged but not dropped, and has a very generic looking dragproxy. So lets first tackle getting rid of that ugly dragproxy by overwriting it at the start of the selection process. We can do this by adding a beforerowselect listener that will modify the dragproxy message.

Listening For The Drag

Using the grids selection model, we can listen for a beforerowselect event and change the dragproxy.

sm: new Ext.grid.RowSelectionModel({ singleSelect:true, listeners: { beforerowselect: function(sm,i,ke,row){ grid.ddText = title_img(row.data.title, null, row); } } })

This gives us a much nicer looking dragproxy, but we still have nowhere to drop the row.

Dropping The Row

In order to drop a row we need to setup the grids body area as a DropTarget, which will allow it to accept a dropped row.

var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, { ddGroup : 'mygrid-dd', notifyDrop : function(dd, e, data){ var sm = grid.getSelectionModel(); var rows = sm.getSelections(); var cindex = dd.getDragData(e).rowIndex; if (sm.hasSelection()) { for (i = 0; i < rows.length; i++) { store.remove(store.getById(rows[i].id)); store.insert(cindex,rows[i]); } sm.selectRecords(rows); } } });

Just like the GridPanel, one of the first config options we need to set on the DropTarget is the ddGroup, which is set to mygrid-dd. This allows the GridPanel to accept any drops that come from a component having this same ddGroup (of course we are only using one as both source and target). Next we setup the code to be executed when a successful drop happens - the notifyDrop.

Lets break down the code were executing when a successful drop occurs:

1. Grab a reference to the GridPanel's SelectionModel.
2. Find out what row(s) are selected.
3. Get the index of where the row was dropped in relation to the other rows.
4. Loop through the selected rows.
5. Remove the row of data from its current location.
6. Add the row of data at its new location.
7. Select the new row (just for a touch of class)

From this bit of code we have a grid that allows you to re-order the rows. If you wanted to update the database with the new order, then an ajax call could be added within the notifyDrop event. We could even use this same basic concept to drag rows between separate grids or other ExtJS components.

Whats Next?

There are a few samples in the SDK download that deal with drag and drop, and as always the API documentation has a huge amount of information to help you on your way.

• Reorder Within a Tree
• Multiple Tree Drag & Drop
• Multiple Grid Drag & Drop
• API Documentation