Hybrid 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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Besides hardcoding an id, it should be ok.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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...
    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.

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

      0  

    Default


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