Ext.ux.MultiSelectTreePanel (with Drag and Drop)

[Deadmeat]

This is a replacement tree component that supports multi-select and drag&drop at the same time. You can shift or ctrl select multiple nodes and drag identically to the normal tree. You can use further extensions to allow grids.

This code has moved to github. The original links are still up, but may be removed in future.

This is the same as the extension for version 2.x at http://extjs.com/forum/showthread.php?t=60759

It seems to work as is with ExtJS 3.x with only two differences:

• allowContainerDrop works correctly out of the box.
• You no longer require the additional override code to fix insertion order.

If you find any bugs with ExtJS 3.x please post here.

This was originally posted as an example here

There is a tree insertion order bug in 3.1.1 reported below by tritonBear. There is an override in the bug thread.

In the latest version:

ExtJS 3.x is required.

Fixes an issue a user had with the way selection works. With the 1.1 release if you select multiple nodes and then later single click one of those nodes it doesn't do anything. The desired/intuitive behaviour was to deselect the other nodes. I implemented this with some messing around. I'm not entirely happy with how complicated it is. The end result is nicer though.

There is also a workaround for a bug in the core. If you click and hold a node for longer than the startdrag threshold then it calls proxy.repair() which causes some flickering.

Original live demo at: http://www.users.on.net/~clear/ext/

[383257357@qq.com]

Thank you very much!

[tritonBear]

Hi,

On v3.1.1 it seems drops are being placed incorrectly at the end of the list and not where it was placed within the nodes.

ex.

Folder
--A
--B
--C

drag B and drop above A produces:

Folder
--A
--C
--B

However, replacing the v3.1.1 ext.all.js with your version, v.2.2.1 ext-all-hacked.js fixes the problem and the drops are placed accordingly. Any insight on what the fix would be for 3.1.1?

Thanks in advance!

[Deadmeat]

How odd. Looks like a bug in the 3.1.1 core. There is a demo here. One of the example tree is a vanilla tree (ie no multiselect) and shows the same issue.

This has fixed itself in ExtJS 3.2.0. I wonder what went wrong.

If you are still having problems (and tied to 3.1.1) I'll look into it and post and override you can use. See here.

Sorry I didn't post earlier. I didn't get an email for some reason.

Hi,

On v3.1.1 it seems drops are being placed incorrectly at the end of the list and not where it was placed within the nodes.

ex.

Folder
--A
--B
--C

drag B and drop above A produces:

Folder
--A
--C
--B

However, replacing the v3.1.1 ext.all.js with your version, v.2.2.1 ext-all-hacked.js fixes the problem and the drops are placed accordingly. Any insight on what the fix would be for 3.1.1?

Thanks in advance!

[Deadmeat]

I've posted an updated beta version for anyone interested.

You get it here: http://www.users.on.net/~clear/ext/index-beta.html

The selection change is nice. If you've ever hated how single click on a selected node doesn't deselect all the other selected nodes, you should like it.

Also fixes a minor flickering issue.

[Deadmeat]

Hi tritonBear,

Turns out it's a tree insertion order bug in the core version.

See bug and override fix here: http://www.extjs.com/forum/showthread.php?t=91506

Sorry I'm such a slacker and didn't see this (not subscribed to my own bug thread)

Hi,

On v3.1.1 it seems drops are being placed incorrectly at the end of the list and not where it was placed within the nodes.

However, replacing the v3.1.1 ext.all.js with your version, v.2.2.1 ext-all-hacked.js fixes the problem and the drops are placed accordingly. Any insight on what the fix would be for 3.1.1?

[WebM]

Single click deselection is very nice in the 1.2 Beta version, but I found a little bug too: If there are undraggable nodes in the selection, it won't work correctly, the nodes won't be deselected.

[ninoguba]

There seems to be a bug in how the nodes are inserted when the nodes are dropped below a target node.

Ex:
1
2
3
4
5
6
7
8
9
0

Select nodes 6,7,8 and drop below node 1. The resulting order of the tree will be:

1
8
7
6
2
3
4
5
9
0

This happens on both 1.1 and 1.2 versions of this extension. I'm also using ExtJS 3.2.1 where this is happening. Would appreciate if someone can share the fix. I'll share the fix here as well once I managed to find a solution.

Thanks!

[ninoguba]

I fixed the issue by adding the following override:

Ext.override(Ext.tree.TreeDropZone, {

 
// fix insertion order when inserting below
completeDrop : function(de){
       var ns = de.dropNode, p = de.point, t = de.target;
       if(!Ext.isArray(ns)){
           ns = [ns];
       }
       var n;
       for(var i = 0, len = ns.length; i < len; i++){
           n = ns[i];
           if(p == "above"){
               t.parentNode.insertBefore(n, t);
           }else if(p == "below"){
               t.parentNode.insertBefore(n, t.nextSibling);
               //Update target to make sure insertion order stays true to the original ordering
               t = n;
           }else{
               t.appendChild(n);
           }
       }
       n.ui.focus();
       if(Ext.enableFx && this.tree.hlDrop){
           n.ui.highlight();
       }
       t.ui.endDrop();
       this.tree.fireEvent("nodedrop", de);
   } 
 });

Please let me know if you find any adverse issues with this fix.

[pit2011]

Hi,
is it possible to use this plugin in commercial projects? I know it has GPL licence, but maybe there is way to provide another licence like Apache Licence?

Thanks,
Jens