Threaded View

  1. #1
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Default Drag & Drop Components between tabs not working

    Drag & Drop Components between tabs not working


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

    Code:
    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...
    Last edited by brittongr; 20 Dec 2011 at 10:11 AM. Reason: removed the hardcoded id from tabs
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar