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
    36,754
    Vote Rating
    827
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi