ExtJS 4.1 - Drag and Drop with RowExpander Issues

Question

Update 9/11/13 - Here is a fully working jsFiddle demonstrating the issue... to experience the issue, expand the grid and attempt to drag the nested row over to the TreePanel. The drag element will be obfuscated by the TreePanel, as if it is behind it. Link here: http://jsfiddle.net/ZGxf5/

Here's a bit of a unique roadblock I've run into... I figured it would be best illustrated with an image:

Drag and Drop Woes

As you can see in the picture, I am attempting to drag a div, generated via the rowBodyTpl property of the RowExpander plugin utilized in the grid shown in the bottom left of the image. I am able to "grab" the element and move it about, however it is seemingly constrained to the RowExpander generated div. I cannot drag the div any further left, nor upwards from where its original position. Attempting to move it into the panel to the right results in the dragging div being obfuscated, as shown in the picture.

I have attempted to completely eliminate all constraints in the startDrag method as you will see in the code below, but to no avail. I am basically just using the code provided in Sencha's 5 Steps to Understanding Drag and Drop with ExtJS Blog Post, but it obviously needs some tweaking for my implementation.

Below is my code for initializing the Drag on the target div..

 /** 
   * NOTE: The following code is executed whenever 
   * the contents of the grid's store change
   */

    var me = this, // ENTIRE left panel, including the TreePanel and lower GridPanel
        divs = Ext.select('div[name=storage-item-div]', false, me.getEl().dom),
        dragOverrides = {}; // provided separately, see below

    Ext.each(divs.elements, function(el){
        console.warn("mkaing new dd", el);
        var dd = new Ext.dd.DD(el, 'storageItemDDGroup',{
            isTarget: false
        });

        Ext.apply(dd, dragOverrides);
    });

The dragOverrides object is defined as follows (note my debugging for Constrain)

        dragOverrides =  {
            b4StartDrag : function() {

                // Cache the drag element
                if (!this.el) {
                    this.el = Ext.get(this.getEl());
                }

                //Cache the original XY Coordinates of the element, we'll use this later.
                this.originalXY = this.el.getXY();

            },
            startDrag: function(){ 
                /** DEBUGGING */
                _t = this; 
                this.resetConstraints();
                this.setXConstraint(1000,1000);
                this.setYConstraint(1000,1000);
            },
            // Called when element is dropped not anything other than a dropzone with the same ddgroup
            onInvalidDrop : function() {
                // Set a flag to invoke the animated repair
                this.invalidDrop = true;
            },
            // Called when the drag operation completes
            endDrag : function() {
                // Invoke the animation if the invalidDrop flag is set to true
                if (this.invalidDrop === true) {
                    // Remove the drop invitation
                    this.el.removeCls('dropOK');

                    // Create the animation configuration object
                    var animCfgObj = {
                        easing   : 'elasticOut',
                        duration : 1,
                        scope    : this,
                        callback : function() {
                            // Remove the position attribute
                            this.el.dom.style.position = '';
                        }
                    };

                    // Apply the repair animation
                    this.el.moveTo(this.originalXY[0], this.originalXY[1], animCfgObj);
                    delete this.invalidDrop;
                }

            }

Finally, I think the rowBodyTpl portion of the lower grid's configuration may be useful in solving the issue, so here is the source for that!

    rowBodyTpl :  ['<div id="OrderData-{item_id}" style="margin-left: 50px;">'+
                   '<tpl for="order_data">'+
                        '<tpl for=".">' +
                          '<div name="storage-item-div" class="draggable" style="padding-bottom: 5px;">' +
                            '<b>{quantity}</b> from Purchase Order <b>{purchase_order_num}</b> @ ${purchase_cost}' +
                            '<input type="button" style="margin-left: 10px;" name="storageViewOrderButton" orderid="{purchase_order_id}" value="View Order"/>' +
                          '</div>' +
                        '</tpl>' +
                    '</tpl>'+
                    '</div>']

John Hall John Hall · Accepted Answer · 2013-09-11T21:22:26

I was able to get this working in a Fiddle, but I had to switch my RowExpander template to instead render an Ext.view.View rather than the div which I was previously using. Using an Ext.view.View allowed me to basically just follow the Sencha demo for using DragZone and DropZone.. kinda wish it wasn't so complicated but hey, that's just how it is sometimes, I guess.

See the very messy jsFiddle source here for a working demo using DragZone and DropZone, feel free to tweak for your own needs: http://jsfiddle.net/knppJ/

Again, the issue here was dragging a nested div from inside a RowExpander generated row inside a gridpanel to a separate adjacent panel. The issue I was encountering is thoroughly described in my question above. I was not able to get a regular div working the way I wanted it to, so I ended up using an Ext.view.View in place of the grid. This required adding a bit of extra logic in the onbodyexpand event fired by the RowExpander plugin, basically just rendering an Ext.view.View to the div generated by the RowExpander.

ExtJS 4.1 - Drag and Drop with RowExpander Issues

1 Answers