1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    4
    Vote Rating
    0
    latinocld is on a distinguished road

      0  

    Question drag and drop tree item to tab panel

    drag and drop tree item to tab panel


    Hello,

    I am trying to drag an item from a tree to the tab panel but it is not working.

    this is what i've done so far:

    Code:
            var compositeItem = new Ext.tree.TreeNode({
                text: 'Item',
                id: 'comp',
                enableDD: true,
                dropConfig: {
                    ddGroup: 'TreeDD',
                    dragData: {
                        name: "Start"
                    }              
                }
            });
    
            //add drop target for group
            var droptarget = new Ext.dd.DropTarget("center1", {
                ddGroup: 'TreeDD'
            });
    
            droptarget.notifyDrop = function(dd, e, data){
                if (data.name) {
                 
                    //add flow here
                    
                    return true;
                }
            }
    When I drag and drop, the notify event is not triggered. What am I doing wrong? Thanks in advance for any help.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Everything looks good. Does "center1" have a dimensions? I mean, isn't it zero height or width?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    4
    Vote Rating
    0
    latinocld is on a distinguished road

      0  

    Default


    no, I do not give it dimensions.

    Code:
           var tabPanel = new Ext.TabPanel({
                    region: 'center',
                    deferredRender: false,
                    activeTab: 0,
                    items: [{
                        contentEl: 'center1',
                        title: 'Process1',
                        closable: true,
                        autoScroll: true
                    }]
                });
    I added dimensions to it on the html side but the tree still does not drop. Other objects do drop.


    Edit [07-17-08]:

    I continued to play with it. Instead of using dropTarget I used dropZone and it works.

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    4
    Vote Rating
    0
    latinocld is on a distinguished road

      0  

    Question strange behavior

    strange behavior


    The tree node displays that it is not dropable on the panel but it does drop. How do I change it so that it shows the correct behavior?

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    It is dependent on return value from notifyOver function: http://extjs.com/deploy/dev/docs/?cl...ber=notifyOver
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    4
    Vote Rating
    0
    latinocld is on a distinguished road

      0  

    Thumbs up


    Thank you for your help. That worked marvelously.

  7. #7
    Ext User
    Join Date
    Dec 2008
    Posts
    12
    Vote Rating
    0
    superman2008 is on a distinguished road

      0  

    Default


    i got a same problem, plz give me more details about how use notifyOver, thanks.

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    notifyOver returns name of css class that should be applied to the drag proxy allowing to show user if drop at that target is allowed or not. If drag a file here http://extjs.com/deploy/dev/examples/tree/reorder.html you can see that drag proxy changes as you drag. That is notifyOver in action, however, tree drag has its own dragging infrastructure so the function is implemented in tree classes.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #9
    Ext User
    Join Date
    Dec 2008
    Posts
    12
    Vote Rating
    0
    superman2008 is on a distinguished road

      0  

    Default


    so i guess that css is used to show icon before name? can u give more info about built-in class and how to made a custom class for this, thanks.

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    You can find css used in Ext in resources/css/ext-all.css. A good, general starting point of css could be: http://www.w3schools.com/Css/default.asp
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM