PDA

View Full Version : [CLOSED][3.1.1+] TreeNode Reorder via D&D is broke



Lloyd K
3 Mar 2010, 6:58 AM
There seems to be a bug starting with Ext 3.1.1 and going into the SVN branch which stops tree nodes from being reordered with drag & drop (i.e just moving the node up or down the branch). The markers etc are all displayed AND the node is removed, insert etc according to the events BUT it never actually physically moves position. This does not seem to affect 3.1.0 though.

Jamie Avins
3 Mar 2010, 9:06 AM
What svn version and example are are you seeing this with?

Lloyd K
3 Mar 2010, 9:37 AM
The SVN revision I'm using is 6016. Not using an example, here's the tree code I'm currently using:



// Create tree
this.designerOutputTree = new Ext.tree.TreePanel({
title: "Output",
region: "east",
flex: 3,
width: 200,
minWidth: 100,
margins: "0 0 0 5",
cls: "iq-reporting-borders-output",

useArrows: true,
autoScroll: true,
containerScroll: true,
enableDD: true,

loader: new Ext.tree.TreeLoader({
preloadChildren: true,
clearOnLoad: true,
requestMethod: "POST",
dataUrl: "reports/backend/columns.ashx?action=tree",
baseParams: {
...
}
}),

listeners: {
load: function(node) {
if (node && node.isLeaf() === false) {

var nodeRemove = function(tree,node,removednode) {
if (node.childNodes.length < 1) {
node.ui.removeClass("x-tree-node-icon");
node.ui.addClass("x-tree-node-collapsed");
}
};

node.on("remove",nodeRemove,this);
}
},
remove: function(tree,parent,node) {
// Jig the CSS
if (parent && !parent.isLeaf()) {
if (parent.childNodes.length < 1) {
parent.ui.removeClass("x-tree-node-icon");
parent.ui.addClass("x-tree-node-collapsed");
}
}
},
beforeclick: function(node,e) {
return true;
},
dblclick: function(node, e) {
// Check node is a leaf
if (node.isLeaf() == false) return;

// Get node information
var node_id = node.id;
var node_text = node.text;
var node_qtip = node.qtip;
var node_dataview = node.attributes.dataView;
var node_category = node.attributes.category;
var node_column_type = node.attributes.columnType;
var node_is_category = node.attributes.isCategory;

// Terminate the node
node.remove();

// Create new node
var new_node = new Ext.tree.TreeNode({
id: node_id,
text: node_text,
leaf: true,
qtip: node_qtip,
iconCls: (node_column_type == "groupings" ? "iq-reporting-column-groupings" : "iq-reporting-column-measures"),
dataView: node_dataview,
category: node_category,
columnType: node_column_type,
isCategory: node_is_category
});

// Get root node
var root_node = null;

if (node.attributes.columnType == "groupings") {
if (this.designerGroupingsTree) root_node = this.designerGroupingsTree.getRootNode();
} else {
if (this.designerMeasuresTree) root_node = this.designerMeasuresTree.getRootNode();
}

if (root_node == null) {
// TODO: Error
return;
}

var found = false;

if (root_node.childNodes != null && root_node.childNodes.length > 0) {
for (var i = 0, len = root_node.childNodes.length; i < len; i++) {
var child_node = root_node.childNodes[i];

if (child_node.text == node_category) {
found = true;

if (!child_node.isExpanded()) {
child_node.expand(true,true,function(n) {
n.appendChild(new_node);
},this);
} else {
child_node.appendChild(new_node);
}

break;
}
}
}

if (!found) {
var cat_node = new Ext.tree.TreeNode({
text: node.attributes.category,
leaf: false,
expanded: false,
draggable: false,
isCategory: true
});

root_node.appendChild(cat_node);
cat_node.appendChild(new_node);
}
},
nodedragover: function(evnt) {
if (evnt.point == "append") {
if (evnt.data.node.attributes.isCategory) {
return false;
} else {
return true;
}
} else {
return true;
}
},
append: function(tree,parent,node,index) {
if (this.designerOutputTreeLoading == false) this.outputTree();

console.log("Added");
},
insert: function(tree,parent,node,ref) {
if (this.designerOutputTreeLoading == false) this.outputTree();

console.log("Inserted");
},
remove: function(tree,node) {
if (this.designerOutputTreeLoading == false) this.outputTree();

console.log("Removed");
},
scope: this
}

});

this.designerOutputTreeLoading = true;

// Create root output node
var root_node = new Ext.tree.AsyncTreeNode({
text: "Selected Output Columns",
singleClickExpand: true,
draggable: false,
expanded: true,
id: "output"
});

this.designerOutputTree.setRootNode(root_node);


Interestingly, http://www.extjs.com/deploy/dev/examples/tree/reorder.html WILL attempt to reorder but appends to the bottom consistently. I can't test locally due to not having php installed :/

Jamie Avins
3 Mar 2010, 10:09 AM
This bug was fixed in SVN 6103.

http://www.extjs.com/forum/showthread.php?t=91506

Lloyd K
3 Mar 2010, 12:59 PM
Ahh excellent I'll give it a whirl tomorrow thanks.