View Full Version : Drag and Drop - Grid to Div

3 Oct 2011, 11:00 AM
I have been searching around for awhile now and I cannot find a good example of using the Drag and Drop from a Grid to Divs.

What I have right now is a Grid Panel that loads simple data. I want to enable that to have drag and drop to a Panel that I created that loads an html page containing an image with divs placed strategically on top of that. I have everything displaying correctly. I am just having a hard time figuring out the drag and drop side of things.

My Grid:

var grid = Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('gridStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
multiSelect: false,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'firstGridDDGroup',
dropGroup: 'secondGridDDGroup'
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
stripeRows: true

My Panel:

var boothBuilderPanel = Ext.create('Ext.panel.Panel', {
id: 'BoothBuilderPanel',
layout: {
type: 'anchor'
title: 'Booth Builder',
region: 'center',
loader: {
url: '../../DDExample/dd.html',
renderer: 'html',
autoLoad: true
autoScroll: true

My HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../booth/extjs4/resources/css/ext-all.css">
<script type="text/javascript" src="../../booth/extjs4/ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="../../DDExample/index.css">
<div class="dd-ct" id="dd1-ct">
<div class="dd-item" id="dd1-item1">Contact INFO</div>
<div class="dd-item" id="dd1-item2">Downloadable Information</div>
<div class="dd-item" id="dd1-item3">LOGO</div>
<div class="dd-item" id="dd1-item4">Website Link</div>

Can anyone help me figure out how to get the grid to drag to the panel/html and drop inside the divs?

Thanks ahead of time!

3 Oct 2011, 5:45 PM
Drag/drop is difficult. Generally it either 'just works' or you have to spend hours pouring over the source code figuring out exactly which methods to override. Pretty much anything is possible, it's just difficult.

If I were you I'd have a go at trying to create a co-operating DropZone for the DIVs:


Start off by keeping it simple, just add a static DIV and try working with that.

If you haven't seen it already I'd highly recommend taking a read of this article too:


3 Oct 2011, 9:34 PM
If you haven't seen it already I'd highly recommend taking a read of this article too:

http://www.sencha.com/blog/5-steps-t...p-with-ext-js/ (http://www.sencha.com/blog/5-steps-to-understanding-drag-and-drop-with-ext-js/)

I have actually read this and it helps me understand what each thing does, but I still don't understand how to get the div to be the dropzone instead of the grid like most examples. I would even be alright with using a DataView, but I can't find any good information about that either.

Also I did take a look at the API and have been trying to put code together that works, but I haven't found anything that has even come close to working.

Any ideas community?


10 Oct 2011, 1:19 PM
Alright well I decided to put the html into a DataView (Ext.view.View) but I am still having issue getting a DropTarget to pickup the html elements inside the view.

This is a copy of my DataView:

var ddZoneTpl = new Ext.XTemplate(
'<tpl for=".">',
'<link rel="stylesheet" type="text/css" href="../../DDExample/index.css">',
'<div class="dd-ct" id="dd1-ct">',
'<div class="dd-item" id="dd1-item{id}">{description}</div>',
'<div class="dd-item" id="dd1-item{id2}">{description2}</div>',
'<div class="dd-item" id="dd1-item{id3}">{description3}</div>',
'<div class="dd-item" id="dd1-item{id4}">{description4}</div>',

var ddZoneView = Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('ddZoneStore'),
tpl: ddZoneTpl,
id: 'ddZoneView',
emptyText: 'No store could be loaded.'

This is the drop target, but each time I try to get just one of the div's inside the data view it gives me this error: Uncaught TypeError: Cannot read property 'body' of null

new Ext.dd.DropTarget(Ext.get('dd1-item1').body.dom, {
notifyDrop: function(source, e, data){


return true;

I have also tired to just make the dataview a drop target and the panel but still isn't working. I get the same error each time.

10 Oct 2011, 3:09 PM
When you inspect the page in Firebug do you see the element with the id dd1-item1? Is it added to the page before you try to create the DropTarget?

On the line before you attempt to create the DropTarget add the line:


It'd be interesting to see what gets logged.

Though it doesn't explain the error message you've quoted, I'd be concerned about this:


Ext.get() will return an Ext.Element. I don't believe it will have a body property though it should have a dom property. However, DropTarget should (theoretically) be happy for you just to pass in the Ext.Element.

17 Aug 2012, 4:34 PM
Hi all,

I know it is an old thread but there can be some people that suffers from same problem.Since it is a bit tricky, i provided a link that explains how to manage drag-drop operation between a grid item and a div..