Page 1 of 3 123 LastLast
Results 1 to 10 of 29

Thread: Ext.ux.MultiSelectTreePanel

  1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Post Ext.ux.MultiSelectTreePanel (with Drag and Drop)

    This is a tree panel that allows multiple selection and drag and drop of said selection.

    Main features:
    • Ctrl-click multi select
    • Shift-click range select
    • Drag and Drop multiple nodes
    • Shows tree/subnodes in dragged version
    • Keeps config options and events of default trees
    • Tested in FF3, Safari3.2, Opera 9.5+, IE 6,7,8rc1


    http://www.users.on.net/~clear/ext/

    It was posted in examples, but since I cleaned it up, I thought I'd post it here.

    Original Thread

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Default Updates

    I've updated the examples page with more information and more examples.

    Including a Column Tree Example which works around issues with the original example.

    And some notes about the planned features(suggestions welcome) for the future. Although ExtJS-3.0 is around the corner so I'll need a need to update when it ships.

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Default Oops

    Okay so when I updated the page I didn't test it in IE. So I didn't know I'd hit the name = id bug so it just spewed errors everywhere.

    So I've fixed that and update the script to fix a bunch of issues.

    It's v1.1 now, but works much the same, except that you need to enableDD, enabledDrag or enableDrop in the config to get Drag and Drop working again.

    See http://www.users.on.net/~clear/ext/ for more information.

  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    108
    Vote Rating
    0
      0  

    Default

    Hi, can I ask something? I wanted to use this in Managing Hierarchical Data in MySQL.
    Do you have sample for this?

    Thanks.

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Default

    Sorry, I don't have one prepared, I developed to it work with files and folders mostly.
    The general gist would just be a nodedrop handler like this:

    Code:
    // not tested...
    tree.on("nodedrop", function(de) {
    	var ns = de.dropNode;
    	if(!Ext.isArray(ns)) {
    		ns = [ns];
    	}
    	var ids = [];
    	for (var c=0,len=ns.length;c<len;c++) {
    		ids.push(ns[c].id);
    	}
    	var targetid = de.target.id;
    	Ext.Ajax.request({
    		url: 'treedrop.php',
    		params: { target: targetid, 'nodes[]': ids }
    	});
    });
    I'm not sure what Ext does when using arrays as request params, so you'll need to play with that part to pass the ids. If your heirarchy is based on path, you'll need to move the code into a "beforeinsert" handler to and collect the paths of the tree nodes before they are moved.

    You might also look at Sakis Remote Tree for a comprehensive example of the sorts of thing you need to handle. The only real difference with this tree is that there is more than one node being dropped at a time, so de.dropNode needs to be treated as a array.

    Hope this helps. I had planned on seeing what would be needed to layer the RemoteTree extension over my tree, but I haven't gotten around to it yet. If you get stuck, post some code and I'll try to help out.

  6. #6
    Ext User
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
      0  

    Default Minor bug in V1.1

    Deadmeat,

    First, thank you so much for your work on this multi-selection extender for trees. In running V1.1 I came across this minor bug. In comparing node order the IE test "document.documentElement.sourceIndex" will test negative when sourceIndex is 0, resulting in an error under IE because the following createRange statement is executed. I simply tested that sourceIndex was defined, and that seemed to take care of the problem. As I said, minor compared to the hard work you put into this extension,

    Clyde

    SEE CODE BELOW:
    Code:
        // private
        // for comparing node order... (taken from quirksmode.org and googlecode)
        compareNodeOrder: document.compareDocumentPosition ?
            function(node1, node2) {
                // W3C DOM lvl 3 method (Gecko)
                return 3 - (node1.ui.elNode.compareDocumentPosition(node2.ui.elNode) & 6);
            } :
    //        (document.documentElement.sourceIndex ? Replaced with following line, so sourceIndex = 0 doesn't cause statement to be evaluated as false
            (typeof document.documentElement.sourceIndex !== "undefined" ?
                function(node1, node2) {
                    // IE source index method
                    return node1.ui.elNode.sourceIndex - node2.ui.elNode.sourceIndex;
                } :
                function(node1, node2) {
                    if (node1 == node2) return 0;
                    // Safari doesn't support compareDocumentPosition or sourceIndex
                    // from http://code.google.com/p/doctype/wik...eDocumentOrder
                    var range1 = document.createRange();
                    range1.selectNode(a.ui.elNode);
                    range1.collapse(true);
    
                    var range2 = document.createRange();
                    range2.selectNode(b.ui.elNode);
                    range2.collapse(true);
    
                    return range1.compareBoundaryPoints(Range.START_TO_END, range2);
                }
            )
    Last edited by mystix; 19 Mar 2009 at 6:25 PM. Reason: POST CODE IN [CODE][/CODE] TAGS. see http://extjs.com/forum/misc.php?do=bbcode#code

  7. #7
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Default

    Looks pretty good. I didn't experiment enough with the sourceIndex, but this seems to work.

    I've updated the 1.1 code. Just wondering if there is a reason you used typeof instead of just checking !== undefined.

    Thanks for the heads up, fix added.

  8. #8
    Ext User
    Join Date
    Mar 2009
    Posts
    16
    Vote Rating
    0
      0  

    Default Reason to use typeof?

    Deadmeat,

    Used typeof instinctively, goes back to an old cross-browser problem I encountered some years back, can't remember all the details, do remember just checking for undefined didn't work across all browsers (think one browser returned it as a string while most didn't) so I got into te habit of using typeof and not worrying about the result because all browsers return it as a string.

    Then started using it as a way to make my js code a bit more typed, and easier to read. So it's just a habit now. Probably don't need typeof in this case but it can't hurt.

    Clyde

  9. #9
    Sencha User
    Join Date
    Mar 2008
    Location
    Adelaide, Australia
    Posts
    72
    Vote Rating
    0
      0  

    Default

    Cool. I wish things like that were simpler to understand.

    Thanks again and good luck with your app.

  10. #10
    Sencha User
    Join Date
    Sep 2008
    Posts
    12
    Vote Rating
    -1
      -1  

    Question Any way to use with Java Code?

    Thanks for all giving this excellent feature, it will be much helpful if you could post a sample java code how to link this Feature in existing TreePanel.

    Thanks
    Karthik

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •