Drag from Tree to div

Question

Hi,

I am trying to implement a drag and drop senario from an extJs TreePanel into a div in the body of the page. I have been following an example by Saki here.

So far I have the below code:

var contentAreas = new Array();
var tree = new Ext.tree.TreePanel({
                title : 'Widgets',
                useArrows: true,
                autoScroll: true,
                animate: true,
                enableDrag: true,
                border: false,
                layout:'fit',
                ddGroup:'t2div',
                loader:new Ext.tree.TreeLoader(),
                root:new Ext.tree.AsyncTreeNode({
                    expanded:true,
                    leaf:false,
                    text:'Tree Root',
                    children:children
                }),
                listeners:{
                    startdrag:function() {
                         $('.content-area').css("outline", "5px solid #FFE767");
                    },
                    enddrag:function() {
                        $('.content-area').css("outline", "0");
                    }
                }
            });

            var areaDivs = Ext.select('.content-area', true);
            Ext.each(areaDivs, function(el) {
                var dd = new Ext.dd.DropTarget(el, {
                    ddGroup:'t2div',
                    notifyDrop:function(ddt, e, node) {
                        alert('Drop');
                        return true;
                    } 
                });
                contentAreas[contentAreas.length] = dd;
            });

The drag begins and the div highlights but when I get over the div it does not show as a valid drop target and the drop fails.

This is my first foray into extJS. I'm JQuery through and through and I am struggling at the moment.

Any help would be appreciated.

Ian

Edit

Furthermore if I create a panel with a drop target in it, this works fine. What is the difference between creating an element and selecting an existing element from the dom. This is obviously where I am going wrong but I'm none the wiser. I have to be able to select existing dom elements and make them into drop targets so the code below is not an option.

Here is the drop target that works

var target = new Ext.Panel({
                renderTo: document.body
                ,layout:'fit'
                ,id:'target'
                ,bodyStyle:'font-size:13px'
                ,title:'Drop Target'
                ,html:'<div class="drop-target" '
                      +'style="border:1px silver solid;margin:20px;padding:8px;height:140px">'
                      +'Drop a node here. I\'m the DropTarget.</div>'

                // setup drop target after we're rendered
                ,afterRender:function() {
                    Ext.Panel.prototype.afterRender.apply(this, arguments);
                    this.dropTarget = this.body.child('div.drop-target');
                    var dd = new Ext.dd.DropTarget(this.dropTarget, {
                        // must be same as for tree
                         ddGroup:'t2div'

                        // what to do when user drops a node here
                        ,notifyDrop:function(dd, e, node) {
                            alert('drop');
                            return true;
                        } // eo function notifyDrop
                    });
                } 
            }); 

Answer 1

If you are having problem duplicating a working example such as that, copy the entire thing, then modify it to your needs line-by-line - you can't go wrong.

Answer 2

See if adding true as the second param here makes any difference:

var areaDivs = Ext.select('.content-area', true);

As a cosmetic note, the param name e conventionally indicates an event object (as in the second arg of notifyDrop). For an element, el is more typical. Doesn't matter functionally, but looks weird to someone used to Ext code to see e passed into the DropTarget constructor.