PDA

View Full Version : examples/tree/reorder.html not behaving properly



FantasticJamie
26 Feb 2010, 5:48 AM
Hello,

I am running the example:

http://www.extjs.com/deploy/dev/examples/tree/reorder.html

I am trying to reorder leaf nodes.

I can successfully move a leaf node inside a different folder.

I cannot successfully move nodes within the same parent folder, or to a specific position within a different folder.

When dragging a leaf node, the UI draws a nice blue dotted line indicating what the new position will be, and the icon of the dragged leaf node changes tp show that it will insert above or below another node. However, when the node is actually dropped, it always jumps to the bottom of the list, not in the indicated position.

How can I change the behaviour so that the dropped node adopts the indicated position where it was dropped within a parent?

Is it a bug that the UI indicates a node will be dropped in a certain position, only for it to "jump" to the bottom of that list?

:)

Thanks!

Jamie.

moegal
26 Feb 2010, 5:54 AM
I just ran into a similar problem. Not exactly the same.

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

seems the problem was coming from a user extension

Ext.tree.TreeCheckbox.js

I just removed it. (I was not using it any longer)

Something to think about. Hope this helps.

Marty

FantasticJamie
26 Feb 2010, 5:58 AM
Thanks for the idea.

However, I am observing this behaviour on the live website example page:

http://www.extjs.com/deploy/dev/exam...e/reorder.html (http://www.extjs.com/deploy/dev/examples/tree/reorder.html)

And do not have any user extensions installed.

I am seeing this in Chrome and Firefox (haven't tried other browsers).

Am I the only one seeing this on the link above?

Thanks!

Jamie.

moegal
26 Feb 2010, 6:20 AM
I can't recall exactly what i did to overcome this. It may be that I added the children tag for each item to the data so it looks like:



var menutreeavaildata = [
{
text:'Available Pages',
expanded:true,
id: 6005,
allowChildren: true,
children:[{
text:'Home',
pageName:'index.asp',
id: 1001,
parent_node: '',
children:[]
},{
text:'About Us',
pageName:'aboutus.asp',
id: 1002,
parent_node: '',
children:[]
},{
text:'Testimonials',
pageName:'testimonials.asp',
id: 1031,
parent_node: '',
children:[]
},{
text:'Links',
pageName:'links.asp',
id: 1032,
parent_node: '',
children:[]
},{
text:'links2',
pageName:'links2.asp',
id: 1035,
parent_node: '',
children:[]
}
]
}

];



Marty

FantasticJamie
27 Feb 2010, 2:52 AM
Hi Marty,

Thanks for the example node data.

I tried the data you pasted without any success. When a node is moved it always jumps to the bottom of it's siblings, regardless of where it was dropped.

Is this an ExtJS bug?

Jamie.

FantasticJamie
27 Feb 2010, 3:00 AM
OK, it appears it is indeed a bug:

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

And it has been fixed in SVN (Yay).

In the meantime I have added the following before I setup my tree which gets things working:


Ext.override(Ext.tree.TreeNode, {
afterAdd : function(node, exists){
if (this.childrenRendered) {
// bulk render if the node already exists
node.render(); //notice there is no exists passed to render.
} else if(exists){
// make sure we update the indent
node.renderIndent(true, true);
}
}
});