PDA

View Full Version : Drag & drop elements beetween panels



DJ JJ
28 Nov 2010, 6:52 AM
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
28 Nov 2010, 11:47 PM
Read this (http://www.sencha.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/).

DJ JJ
29 Nov 2010, 1:02 AM
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
2 Dec 2010, 1:09 AM
Anyone can help me?? I need it for my thesis :(

DJ JJ
6 Dec 2010, 2:20 AM
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
20 Dec 2010, 7:24 AM
My problem is that my detailsPanel hasn't the body, so detailsPanel.body is null

Animal
20 Dec 2010, 7:46 AM
So override onRender!

DJ JJ
20 Dec 2010, 7:53 AM
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;
}
})
}



});