Drag & Drop Components between tabs not working

[brittongr]

[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]

Besides hardcoding an id, it should be ok.

[brittongr]

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]

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.

dd.jpg