Results 1 to 7 of 7

Thread: Drag/Drop issue

  1. #1
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516

    Default Drag/Drop issue

    I've got a tree/grid displaying on my page, and the drag/drop functionality works fine. Users can move tree nodes around, and I'm working on the ability to let users drop grid items onto tree nodes.

    Here's my problem... I need different behaviors when Tree nodes are drag/dropped as opposed to when Grid items are dropped.

    I already use the "movenode" event to execute an AJAX call when drag/dropping the nodes. This works fine.

    But what am I supposed to use for dragging the grid items? I was thinking "beforenodedrop", but that event is still called when tree nodes are drag/dropped.

    Any advice?

  2. #2
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516

    Default

    Hm... I'm noticing that the "event.data" parameter passed to the "beforenodedrop" handler has a "selections" attribute.

    When I'm dropping a tree nod, event.data.selections is undefined.

    When I'm dropping grid items, event.data.selections is a list of objects.

    I think this may work. I'd still love to hear if anyone does this differently.

  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Paris
    Posts
    52

    Default

    This may not be the cleanest solutions, but you can check for the "data" property of the beforenodedrop event.
    If dropping grid items, the property will contain a reference to the grid. I do not know what will exactly be in the event.data when dropping a treeNode, but I'm pretty sure it will be different.

    edit: Oh well you found it yourself ! But basically I don't see how to do it differently.

  4. #4
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516

    Arrow

    I'm almost there... but I can't access the values I need. I need the values returned in the event.data.selections object, but I can't seem to access them:

    Code:
            treePanel.addListener(
                'beforenodedrop',
                function(event) {
                    // this sub-routine gives us the ItemID from the grid record
                    function test(record) {
                        return record.get('ItemID');
                    }
    
                    //this is a comma-separated string of record IDs
                    var gridItemString = event.data.selections.map(test);
    
                    var gridItemArray  = new Array();
                    
                    alert(gridItemString); 
    //output: 100,101,102,103......
    //this looks like a string of comma-separated numbers
    
                    alert(typeof gridItemString); 
    //apparently it's an object, not a string
                    
                    gridItemArray = gridItemString.split(",");
    //throws an error: "gridItemString.split() is not a function"
    //which makes sense since this isn't a string
    ...
    });
    What kind of object is this? Using gridItemString.value returns undefined... help!

  5. #5
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516

    Default

    I needed to specifically define the variable as a String() object in order to use split().

    Code:
    var gridItemString = new String(event.data.selections.map(test));
    Things work fine now!

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Paris
    Posts
    52

    Default

    What are you trying to do exactly ? In my situation the event.data.selections object is an array containing the selected records in the source GridPanel. But maybe it depends on the selectionmodel of the grid (mine is a rowselectionmodel)

  7. #7
    Sencha Developer
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516

    Default

    I don't think the object is actually an array... it looks like one but it's type isn't Array() it's Object(). Unless, of course, I'm totally wrong and doing things the hard way.

    What I'm doing is taking the object, mapping it's values into a String() object, and then splitting the string into an Array.

    I then loop through my array making AJAX requests to do some other work. Here's my entire method:

    Code:
            treePanel.addListener(
                'beforenodedrop',
                function(event) {
    
                    //THIS IS DEPENDANT ON TREE NODE SETTINGS
                    if (event.target.attributes.nodeEditRule == 'noEdit') {
                    
                        Ext.Msg.alert(
                            'Error',
                            'The selection cannot be dropped onto this node because the node cannot be edited.'
                        );
                    
                        return false;
                    }
                    
                    // THIS IS ONLY TRUE IF GRID ITEMS ARE DROPPED
                    else if (event.data.selections) {
                        // this sub-routine gives us the ItemID from the grid record
                        function test(record) {
                            return record.get('ItemID');
                        }
    
                        //this is a comma-separated string of record IDs
                        var gridItemString = new String(event.data.selections.map(test));
    
                        //turn the string into an array
                        var gridItemArray  = new Array();
                        gridItemArray = gridItemString.split(",");
    
                        var connection = new Ext.data.Connection({
                            url: 'AjaxSupport/ProgramTreeJson.aspx?action=additem'
                        });
    
                        //individually submit item IDs back to the controller
                        for (var i=0; i<gridItemArray.length; i++) {
                            connection.request({
                                params: {
                                    nodeId: event.target.id,
                                    itemid: gridItemArray[i]
                                }
                            });
                        }//end FOR loop
                                    
                        refreshTree(currentRootNode);
                    }//end ELSE IF
                }
            );

Posting Permissions

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