I wanted to enhance the experience on one of my applications a bit since we’re doing a release in a few weeks. I took the opportunity to implement some more ExtJS awesomeness on many of the tools inside the application, and on one in particular, users are able to create 1-1 mappings between two sets of data.

I decided to tinker around with the drag & drop capabilities of ExtJS and originally had the user click a button, which created a window, into which the user could drag an item from each data set and create the mapping. It worked very well and was a much better interaction than the previous version.

I showed it to a colleague, and he actually thought of a way to make it better. Why not simply allow the user to click and drag an item from one grid to the item on the other grid to which she wanted to map it? Even better. However, when I started to think about the code I would need, I couldn’t think of how to determine which item in the “drop” data grid was the actual target.

Let’s say you have automobiles in one grid, and colors in another. You could let the user drag a color from the second grid onto a specific model of vehicle on the first, but the trick is determining onto which model the user dropped the color.

clip_image001

If I was able to detect the model, I could then show a new window with the requested mapping so that the user could verify her choice.

clip_image001[5]

After some digging around, I discovered that the Grid object’s view has a findRowIndex() method which accepts an Element as an argument. Since the notifyDrop event provides the e.target() property, that was all I needed. I could get the row index, and then retrieve the corresponding item from the data store.

// Determine the row on which the color was dropped
targetRow = TargetGrid.getView().findRowIndex(e.target);
targetDataItem = TargetGrid.store.data.items[targetRow];

You can check out the sample code that shows how to determine the target grid element on my Drag & Drop Target Detection example page.