PDA

View Full Version : Interference problem with coincidentically overlaying TreePanels during drag'n'drop



Chau
2 Dec 2011, 12:35 AM
Ext version tested:


Ext 3.4



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


Chrome 15
IE9
FF8



Operating System:


Windows 7



Description:


I have two windows, identical in layout, located on top of each other. The top most window is modal. When dragging from one tree to another in the top most window,
the treepanels D&D functionality in the lower window interferes.



Test Case:



<html>
<head>
<title>D&D Issues...</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css">
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = 'http://dev.sencha.com/deploy/ext-3.4.0/resources/images/default/s.gif';

TreeA = Ext.extend(Ext.tree.TreePanel, {
loader:new Ext.tree.TreeLoader()
,enableDD:true
,rootVisible:true
,initComponent:function() {
var config = {
root: {
text:'Root'
,loaded:true
}
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
TreeA.superclass.initComponent.apply(this, arguments);

this.on('beforenodedrop', this.onBeforeNodeDrop);
},

onBeforeNodeDrop: function(dropEvent) {
alert('Dragged to treepanel A');
}
});

Ext.reg('treea', TreeA);

var bNodes = [{
"text": "BNode 1",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}, {
"text": "BNode 2",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}, {
"text": "BNode 3",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}];

TreeB = Ext.extend(Ext.tree.TreePanel, {
loader:new Ext.tree.TreeLoader()
,enableDD:true
,rootVisible:false
,initComponent:function() {
var config = {
root: {
text:'Root'
,children:bNodes
}
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
TreeB.superclass.initComponent.apply(this, arguments);

this.on('beforenodedrop', this.onBeforeNodeDrop);
this.on('dblclick', this.onDblClick);
},

onBeforeNodeDrop: function(dropEvent) {
alert('Dragged to treepanel B');
},

onDblClick: function(node, event) {
new MyWindow2({
modal: true
}).show();
}
});

Ext.reg('treeb', TreeB);

MyWindow1 = Ext.extend(Ext.Window, {
title:'Window 1'
,width:400
,height:400
,initComponent:function() {

var config = {
layout:{
type:'hbox'
,padding:'4'
,align:'stretch'
}
,items:[{
xtype:'treea'
,title:'Treepanel A'
,flex:1
},{
xtype:'box'
,width:4
},{
xtype:'treeb'
,title:'Treepanel B'
,flex:1
}]
}; // eo config

Ext.apply(this, Ext.apply(this.initialConfig, config));
MyWindow1.superclass.initComponent.apply(this, arguments);
}
}); // eo extend

TreeC = Ext.extend(Ext.tree.TreePanel, {
loader:new Ext.tree.TreeLoader()
,enableDD:true
,rootVisible:true
,initComponent:function() {
var config = {
root: {
text:'Root'
,loaded:true
}
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
TreeC.superclass.initComponent.apply(this, arguments);

this.on('beforenodedrop', this.onBeforeNodeDrop);
},

onBeforeNodeDrop: function (dropEvent) {
// Does this node come from another tree?
if (dropEvent.source.tree.id !== dropEvent.tree.id) {

// The node should be cloned and inserted in the target tree.

// The node that was dropped
var node = dropEvent.dropNode;

// Copy the node.
var nodeCopy = new Ext.tree.TreeNode(
Ext.apply({}, node.attributes)
);

// Give it a random id.
//nodeCopy.id = Ext.id(null, 'xnode-');

dropEvent.dropNode = nodeCopy;
}
return true;
}
});

Ext.reg('treec', TreeC);

var bNodes = [{
"text": "BNode 1",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}, {
"text": "BNode 2",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}, {
"text": "BNode 3",
"leaf": true,
"draggable": true,
"children": null,
"allowDrop": false
}];

TreeD = Ext.extend(Ext.tree.TreePanel, {
loader:new Ext.tree.TreeLoader()
,enableDD:true
,rootVisible:false
,initComponent:function() {
var config = {
root: {
text:'Root'
,children:bNodes
}
};

Ext.apply(this, Ext.apply(this.initialConfig, config));
TreeD.superclass.initComponent.apply(this, arguments);

this.on('beforenodedrop', this.onBeforeNodeDrop);
},

onBeforeNodeDrop: function (dropEvent) {
// Does this node come from the target tree?
if (dropEvent.source.tree.id !== dropEvent.tree.id) {
alert('Dragged to treepanel D');
}
return true;
}
});

Ext.reg('treed', TreeD);

MyWindow2 = Ext.extend(Ext.Window, {
title:'Window 2'
,width:400
,height:400
,initComponent:function() {

var config = {
layout:{
type:'hbox'
,padding:'4'
,align:'stretch'
}
,items:[{
xtype:'treec'
,title:'Treepanel C'
,flex:1
},{
xtype:'box'
,width:4
},{
xtype:'treed'
,title:'Treepanel D'
,flex:1
}]
}; // eo config

Ext.apply(this, Ext.apply(this.initialConfig, config));
MyWindow2.superclass.initComponent.apply(this, arguments);
}
}); // eo extend

// app entry point
Ext.onReady(function () {
var win1 = new MyWindow1();
win1.show();
});
</script>
</head>
<body>
</body>
</html>
<!-- eof -->


See this URL : http://www.gis34.dk/treetestsaki.htm


Steps to reproduce the problem:


Double click one of the nodes in Treepanel B. A new window opens modally on top.
[1] Drag a node from Treepanel D to Treepanel C.
[2] Move the window so that Treepanel C is above Treepanel B. Repeat step 1.
[3] Move the window so that the two windows doesn't overlap. Repeat step 1.



The result that was expected:


In all three steps I intuitively expect one node to be copied from Treepanel D to Treepanel C.



The result that occurs instead:


[1] The node dropped in Treepanel C spawns into two nodes.
[2] The node dropped in Treepanel C spawns into two nodes and might even cause the alert in Treepanel B to fire.
[3] The node dropped in Treepanel C is copied just like I expect it too.



Screenshot or Video:


None



Debugging already done:


none



Possible fix:


not provided

mitchellsimoens
2 Dec 2011, 11:27 AM
Thank you for the report and this is an issue in Ext JS 4 even... It will be fixed for 4.1.x

Chau
4 Dec 2011, 11:31 PM
Thank you for the report and this is an issue in Ext JS 4 even... It will be fixed for 4.1.x

Is ExtJS 3.x deprecated or will a fix for be available too?