Results 1 to 2 of 2

Thread: DDProxy undo element removal

  1. #1
    Sencha Premium User
    Join Date
    Aug 2016
    Posts
    3

    Default DDProxy undo element removal

    I have a component definition that extends Ext.Container with a custom renderTpl which allows me to give it better styling. I have made it 'draggable' by attaching a DDProxy to it's element in a callback when the 'render' event is fired. The dragging works and I can drag items between DDTarget panel innerCt elements configured to accept them. I also have a 'bin' component that is set up to allow items to be dropped onto it, which shows a modal for confirmation of deletion and waits for an ajax request to the server to confirm after that. This confirmation and ajax is wrapped in a promise.

    I have developed a kind of promise chain 'protocol' that allows components to interact with each-other to handle various ajax requests and ui modal callbacks to ensure that the dragging process can be successfully completed. It looks like this:

    Code:
    // me is the component reference. Referenced outside the scope of the DDProxy overrides object.
    // this code is within the overrides onDragDrop event handler:
    var item = Ext.get(me.el).component;
    var dropCmp = Ext.get(targetElId).component;
    var itemContCmp = item.container.component;
    
    dropCmp.ticketEnterHandshake(item)
        .then(itemContCmp.ticketLeaveHandshake(item))
        .then(itemContCmp.ticketLeaveAction(item))
        .then(dropCmp.ticketEnterAction(item))
        .then(function() { ]
            // item should be successfully moved
            dragCmp.onDragOut(evtObj, targetElId); 
        })
        ['catch'](function(err) {
            // need a way to reset me.el to its original state here
            dragCmp.onInvalidDrop();
        });
    I need to be able to undo the removal (caused by ddproxy) of the html element from it's previous drag container in the catch clause, or prevent it from being removed at all in the first place so that I can remove it manually.

    I have tried caching me.el to the overrides object and reassigning it, but because it is an object reference ( i think ) and the me.el object itself is being changed by DDProxy, this isn't working.

  2. #2
    Sencha Premium User
    Join Date
    Aug 2016
    Posts
    3

    Default

    The issue was that I was not chaining my promises properly. The fixed version of this for me was:

    Code:
    dropCmp.ticketEnterHandshake(item)
        .then(function(item){ return itemContCmp.ticketLeaveHandshake(item); })
        .then(function(item){ return itemContCmp.ticketLeaveAction(item); })
        .then(function(item){ return dropCmp.ticketEnterAction(item); })
        .then(function() { ]
            // item should be successfully moved
            dragCmp.onDragOut(evtObj, targetElId); 
        })
        ['catch'](function(err) {
            // need a way to reset me.el to its original state here
            dragCmp.onInvalidDrop();
        });

Similar Threads

  1. Undo record.erase removal from store
    By incutonez in forum Ext 5: Q&A
    Replies: 5
    Last Post: 17 Jun 2015, 4:50 PM
  2. Replies: 1
    Last Post: 30 Sep 2013, 8:13 AM
  3. DOM element/component removal order
    By XASD in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Oct 2007, 5:50 AM
  4. beta2/rc1(not bug):DDProxy dragged element different behaviour
    By darek.adamkiewicz in forum Community Discussion
    Replies: 1
    Last Post: 17 Jul 2007, 6:01 AM
  5. beta2/rc1(not bug):DDProxy dragged element different behaviour
    By darek.adamkiewicz in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 17 Jul 2007, 6:01 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •