View Full Version : Possible Bug with Drag and Drop: From a RowExpander row to another Panel

10 Sep 2013, 1:01 PM
Although this post is answered, I still feel like this is a possible bug.
Please see my example Fiddle's to observe the bug.
Fiddle Demonstrating Problem: http://jsfiddle.net/ZGxf5/
Fiddle Demonstrating Fix: http://jsfiddle.net/knppJ/

As the title states, my goal is to drag a <div> generated via the RowExpander plugin to a panel contained within the same window.

I have a post on StackOverflow here: http://stackoverflow.com/questions/18728593/extjs-4-1-drag-and-drop-with-rowexpander-issues

(http://stackoverflow.com/questions/18728593/extjs-4-1-drag-and-drop-with-rowexpander-issues)My issue is demonstrated in this picture:

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.

/** * 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(){
_t = this;
// 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

// 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>' +

Here is a jsFiddle showing the issue: http://jsfiddle.net/ZGxf5/. Simply expand one of the Grid Rows and attempt to drag the nested row over to the TreePanel on the right side.

Any Sencha dev input here? This seems like a big ol' bug to me...

10 Sep 2013, 9:48 PM
Try Ext.dd.DragSource or even Ext.dd.DragZone to handle all row bodies in the grid.

11 Sep 2013, 12:40 PM
Try Ext.dd.DragSource or even Ext.dd.DragZone to handle all row bodies in the grid.

Thanks, I will try that.

I created a jsFiddle demonstrating the issue here: http://jsfiddle.net/ZGxf5/

(http://jsfiddle.net/ZGxf5/)Any Sencha devs have an idea what's going on here? Seems like a bug...

[EDIT] DragZone was the way to go, though I ended up having to use an Ext.view.View in place of the HTML generated by the RowExpander plugin. Working example Fiddle here: http://jsfiddle.net/knppJ/

11 Sep 2013, 10:10 PM
Well, DDProxy is YUI part (the ancestor of ExtJS) and it is not so good as Ext classes.
I believe neither of YUI implementation classes is used directly - only their descendants.

12 Sep 2013, 4:46 AM
Well, DDProxy is YUI part (the ancestor of ExtJS) and it is not so good as Ext classes.
I believe neither of YUI implementation classes is used directly - only their descendants.

Eh? Not really sure what you're getting at here, I didn't use DDProxy in my example code, nor my project's code. Regardless, I have managed a workaround by replacing the HTML generated by the RowExpander template with an Ext.view.View, then using DragZone on the view (similar to Sencha's example here: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/dd/dragdropzones.html) and a DropZone on the TreePanel view. I feel it's a bit hack-ish since I have to create a store for every View generated on RowExpand.. but hey it works.

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 div. 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.