PDA

View Full Version : Drag & Drop Panel Problem.



burnsd1
1 Dec 2010, 1:43 PM
I have two nested panels, a treePanel that is configured for autoscroll and drag&drop and a ExtPanel that supports a map. I can drag&drop nodes from the treePanel to the map without a problem. Here is my problem. When the treepanel (nodes) is expanded to the extent that you have to scroll-right to view the newly expanded nodes, those nodes are not draggable. Only the nodes that were viewable before scrolling are registered.

However, if the treePanel is resized to reveal the expanded nodes, those nodes are draggable to the map.
I also implement the same functionality with the treePanel in and organization chart view. This is where the problem is most profound because the chart layout extends horizontally much more than the treePanel.

Has anyone run across this problem? I'd appreciate feedback. TIA...

jgcrowder
7 Dec 2010, 6:37 AM
I think I've discovered a bug in the drag/drop implementation in ExtJS. Whenever you have two dd-enabled panels side by side and one panel's content is large enough so that it scrolls horizontally, whatever content is "scrolled" cannot be dragged.

Here's an example using two trees. Notice how the nodes named "NodeX" cannot be dragged.

Does anyone have any clue how to fix this?


var dummynodes = {
text: 'Node',
expanded: true,
children: [{
text: 'Node',
expanded: true,
children: [{
text: 'Node',
expanded: true,
children: [{
text: 'NodeX',
expanded: true,
children: [{
text: 'NodeX'
}]
}]
}]
}]
};

var tree1 = new Ext.tree.TreePanel({
autoScroll: true,
enableDD:true,
root: new Ext.tree.AsyncTreeNode(dummynodes)
});

var tree2 = new Ext.tree.TreePanel({
enableDD: true,
root: new Ext.tree.TreeNode({text:'Root'})
});

var win = new Ext.Window({
width: 150,
height: 200,
layout: {
type: 'hbox',
align:'stretch'
},
defaults: {
flex: 1
},
items:[tree1,tree2]
});

win.show();

QuentinCodes
7 Dec 2010, 8:10 AM
Yep, I have the same problem. If this is really a bug in ExtJS then what can we do? Can we somehow tweak the code that it doesnt identify these as "NodeX"? I assume it needs to be read as a normal "Node". Or maybe its possible to reduce the horizontal view? Thanks for any suggestions.

jgcrowder
7 Dec 2010, 1:47 PM
Yep, I have the same problem. If this is really a bug in ExtJS then what can we do? Can we somehow tweak the code that it doesnt identify these as "NodeX"? I assume it needs to be read as a normal "Node". Or maybe its possible to reduce the horizontal view? Thanks for any suggestions.

I'm not sure you understand the problem. There are no differences between the nodes I named "Node" and "NodeX"... those are just titles I gave to the nodes. The real difference is that those I gave the name "NodeX" are hidden initially until you scroll them into view. Once they are scrolled into view, for some reason you cannot drag them.

jgcrowder
8 Dec 2010, 1:16 PM
I can also reproduce this problem using the "Drag and Drop betweens two TreePanels" example at the following URL:
http://dev.sencha.com/deploy/dev/examples/tree/two-trees.html

If manipulate the left tree to make it 14 levels deep, you cannot drag any nodes beyond the 14th level over to the right tree.

Animal
14 Dec 2010, 9:17 AM
I think the TreeDragZone uses the wrong element as it's base element.

Try redefining the class using the code below. TreeDropZone might need this small change too.

If it works, you could report it as a bug with the fix attached.



/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
/**
* @class Ext.tree.TreeDragZone
* @extends Ext.dd.DragZone
* @constructor
* @param {String/HTMLElement/Element} tree The {@link Ext.tree.TreePanel} for which to enable dragging
* @param {Object} config
*/
if(Ext.dd.DragZone){
Ext.tree.TreeDragZone = function(tree, config){
Ext.tree.TreeDragZone.superclass.constructor.call(this, tree.body, config);
/**
* The TreePanel for this drag zone
* @type Ext.tree.TreePanel
* @property
*/
this.tree = tree;
};

Ext.extend(Ext.tree.TreeDragZone, Ext.dd.DragZone, {
/**
* @cfg {String} ddGroup
* A named drag drop group to which this object belongs. If a group is specified, then this object will only
* interact with other drag drop objects in the same group (defaults to 'TreeDD').
*/
ddGroup : "TreeDD",

// private
onBeforeDrag : function(data, e){
var n = data.node;
return n && n.draggable && !n.disabled;
},

// private
onInitDrag : function(e){
var data = this.dragData;
this.tree.getSelectionModel().select(data.node);
this.tree.eventModel.disable();
this.proxy.update("");
data.node.ui.appendDDGhost(this.proxy.ghost.dom);
this.tree.fireEvent("startdrag", this.tree, data.node, e);
},

// private
getRepairXY : function(e, data){
return data.node.ui.getDDRepairXY();
},

// private
onEndDrag : function(data, e){
this.tree.eventModel.enable.defer(100, this.tree.eventModel);
this.tree.fireEvent("enddrag", this.tree, data.node, e);
},

// private
onValidDrop : function(dd, e, id){
this.tree.fireEvent("dragdrop", this.tree, this.dragData.node, dd, e);
this.hideProxy();
},

// private
beforeInvalidDrop : function(e, id){
// this scrolls the original position back into view
var sm = this.tree.getSelectionModel();
sm.clearSelections();
sm.select(this.dragData.node);
},

// private
afterRepair : function(){
if (Ext.enableFx && this.tree.hlDrop) {
Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
}
this.dragging = false;
}
});
}