1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default Drag & drop elements beetween panels

    Drag & drop elements beetween panels


    Hi! I created my GUI with the Designer; there is a tree panel on the left and a panel on the right; I need to drag elements from the tree panel and drop them to the panel on the right. Jarred said to me that I have to set enableDrag: true on my TreePanel, and then program a DropZone for your Panel. How can I program a DropZone?? Thanks for the help

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Read this.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default


    Thank you very much! I'm using the designer, so, where must I write the code for the drag and drop?? in the .js file? and then, when I drag an element I don't wanna cut it, but I wanna that this element is copied in the panel.. is it possible to do this?

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default


    Anyone can help me?? I need it for my thesis

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default


    I found some code and I tried to implement it, but it doesn't work
    This is my Viewport.js (I implemented the interface with the Designer... datFed is the autoRef of my panel)
    PHP Code:
    Viewport Ext.extend(ViewportUi, {
        
    initComponent: function() {
            
    Viewport.superclass.initComponent.call(this);
            
            var 
    detailsPanel Ext.getCmp('datFed');
            var 
    pnlDropTargetEl detailsPanel.body;
            
            var 
    pnlDropTarget = new Ext.dd.DropTarget(pnlDropTargetEl, {
            
    ddGroup'treeDDGroup',
            
    copyfalse,
            
    notifyDrop: function(ddSourceedata) {
                var 
    el detailsPanel.body;
                
    tpl.overwrite(eldata.node.attributes);
                return 
    true;
            }

            })

        

    }}); 
    When I execute the page, it renders as a white page. With Firebug, I see that in this piece of code:
    PHP Code:
    Ext.dd.DropTarget.superclass.constructor.call(thisthis.el.domthis.ddGroup || this.group,
          {
    isTargettrue}); 
    this.el is null

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default


    My problem is that my detailsPanel hasn't the body, so detailsPanel.body is null

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    So override onRender!

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78
    Vote Rating
    0
    DJ JJ is on a distinguished road

      0  

    Default


    so, does my code should look like this?

    PHP Code:
    Viewport Ext.extend(ViewportUi, {
        
    initComponent: function() {
            
    Viewport.superclass.initComponent.call(this);
            
            var 
    aaa Ext.get('ciao');//this is the DIV on my page where I wanna put the drop target
            
    var pnlDropTargetEl aaa.onRender();

            

        var 
    pnlDropTarget = new Ext.dd.DropTarget(pnlDropTargetEl, {
                
    ddGroup'treeDD',
                
    copyfalse,
                
    notifyDrop: function(ddSourceedata) {
                    
    alert("ciao");
                    return 
    true;
                }
            })
        }
        
        
        
    }); 

Similar Threads

  1. Tree Drag&Drop - copy&paste node, not cut
    By SchattenMann in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 28 Oct 2012, 11:01 PM
  2. Drag & drop elements beetween panel
    By DJ JJ in forum Ext Designer: Help & Discussion
    Replies: 11
    Last Post: 27 Dec 2010, 6:09 AM
  3. Drag&Drop multiple elements
    By Alex84 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 29 Oct 2009, 8:12 AM
  4. [solved] xtype: portal - not working drag&drop panels
    By RobertT in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 23 Sep 2009, 4:39 AM
  5. Replies: 3
    Last Post: 16 Sep 2009, 5:45 AM

Thread Participants: 2