Drag & drop elements beetween panels

[DJ JJ]

Hi! I created my GUI with the Designer; there is a tree panel on the left and a panel on the right; I need to drag elements from the tree panel and drop them to the panel on the right. Jarred said to me that I have to set enableDrag: true on my TreePanel, and then program a DropZone for your Panel. How can I program a DropZone?? Thanks for the help

[Condor]

Read this.

[DJ JJ]

Thank you very much! I'm using the designer, so, where must I write the code for the drag and drop?? in the .js file? and then, when I drag an element I don't wanna cut it, but I wanna that this element is copied in the panel.. is it possible to do this?

[DJ JJ]

Anyone can help me?? I need it for my thesis

[DJ JJ]

I found some code and I tried to implement it, but it doesn't work
This is my Viewport.js (I implemented the interface with the Designer... datFed is the autoRef of my panel)

Viewport = Ext.extend(ViewportUi, {
    initComponent: function() {
        Viewport.superclass.initComponent.call(this);
        
        var detailsPanel = Ext.getCmp('datFed');
        var pnlDropTargetEl = detailsPanel.body;
        
        var pnlDropTarget = new Ext.dd.DropTarget(pnlDropTargetEl, {
        ddGroup: 'treeDDGroup',
        copy: false,
        notifyDrop: function(ddSource, e, data) {
            var el = detailsPanel.body;
            tpl.overwrite(el, data.node.attributes);
            return true;
        }

        })

    

}}); 

When I execute the page, it renders as a white page. With Firebug, I see that in this piece of code:

Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
      {isTarget: true}); 

this.el is null

[DJ JJ]

My problem is that my detailsPanel hasn't the body, so detailsPanel.body is null

[Animal]

So override onRender!

[DJ JJ]

so, does my code should look like this?

Viewport = Ext.extend(ViewportUi, {
    initComponent: function() {
        Viewport.superclass.initComponent.call(this);
        
        var aaa = Ext.get('ciao');//this is the DIV on my page where I wanna put the drop target
        var pnlDropTargetEl = aaa.onRender();

        

    var pnlDropTarget = new Ext.dd.DropTarget(pnlDropTargetEl, {
            ddGroup: 'treeDD',
            copy: false,
            notifyDrop: function(ddSource, e, data) {
                alert("ciao");
                return true;
            }
        })
    }
    
    
    
});