PDA

View Full Version : Drag & Drop Components between tabs not working



brittongr
19 Dec 2011, 1:38 PM
[Unanswered]

Hi,

i've been playing with the drag & drop the past week, so i did a lot of research before, but i couldn't find the way to drag and drop components between tabs, i don't know why when i drag a panel from one tab to another the notifyOver method doesn't get hit.

I added a mouse over listener to the tabstrip to auto select the desired tab... the reason why i need this is because i'm building a simple designer and i want to add that feature...

I already have a workaround to that, where i can move fieldsets or cotainers from one tab to another using the outline tree, but i will like to know if i'm doing something wrong or there is a way to archive that behavior...

Here is a simple demo:



Ext.override(Ext.TabPanel,
{
getStrip: function(){
return this.strip;
}
});

Ext.onReady(function(){
var panel1 = new Ext.Panel(
{
title: 'Title 1',
html: 'Content',
draggable:
{
ddGroup: 'ddGroup'
}
});

var panel2 = new Ext.Panel(
{
title: 'Title 2',
html: 'Content',
draggable:
{
ddGroup: 'ddGroup'
}
});

var panel3 = new Ext.Panel(
{
title: 'Panel 3',
html: 'Content',
draggable:
{
ddGroup: 'ddGroup'
}
});

var tabPanel = new Ext.TabPanel(
{
id: 'tabPanel',
region: 'center',
closable: true,
frame: true,
activeTab: 0,
defaults:
{
bodyStyle: 'padding:5px',
autoScroll: true,
},
resizeTabs: true,
deferredRender: false,
layoutOnTabChange: true,
items: [
{
title: 'General',
items: [panel1]
},
{
title: 'Advanced',
items: [panel2, panel3]
}],
listeners:
{
render: function(){
//retrieve the underlying strip component and attach the mouseover event to that
var strip = this.getStrip();

strip.on(
{
mouseover: function(e, t){
var tab = tabPanel.findTargets(e);

if (tab.item != null)
{
tab = tab.item;
tabPanel.setActiveTab(tab);
}
}
});

this.items.each(function(t){
t.setTitle(t.id);
});
}
}
});

var viewport = new Ext.Viewport(
{
layout: 'fit',
items: [tabPanel]
});

tabPanel.items.each(function(t){
var dd = new Ext.dd.DropTarget(t.id,
{
ddGroup: 'ddGroup',
notifyOver: function(){
console.log('notifyOver ' + this.id);
}
});
});


To test it you just need to drag from the upper left corner the panel "Title 1" from the "General" tab...

I will thank you any comment...

mitchellsimoens
19 Dec 2011, 1:48 PM
Besides hardcoding an id, it should be ok.

brittongr
19 Dec 2011, 1:52 PM
Besides hardcoding an id, it should be ok.
Thanks for the quick reply... the component i'm building it doesn't has a hardcoded id because the tabs are added dinamically and is not working too...

brittongr
19 Dec 2011, 2:09 PM
I changed the code to remove the hardcoded id, at the screenshot below you can see when the second tab is selected the notifyOver is still printing "ext-comp-1004" when i'm expecting "ext-comp-1005".

The code create a DropTarget instance for each tab.

30164