1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default Panel to Tree, Drag & Drop - how?

    Panel to Tree, Drag & Drop - how?


    hi,
    i'm just playing around the second day, trying to find useful information how to drag an item from a Panel into a Tree. My Panel holds 'users' and my Tree holds 'usergroups'. A Usergroup acts as node, its users act as children.

    Here's a part of my incomming JSON:
    Code:
     {
         "children": [{
             "text": "testuserA",
             "id": "1",
             "dataType": "user",
             "cls": null,
             "iconCls": "icon-user",
             "expandable": null,
             "dropable": "false"
         }, {
             "text": "testuserB",
             "id": "5",
             "dataType": "user",
             "cls": null,
             "iconCls": "icon-user",
             "expandable": null,
             "dropable": "false"
         }, {
             "text": "testuserC",
             "id": "7",
             "dataType": "user",
             "cls": null,
             "iconCls": "icon-user",
             "expandable": null,
             "dropable": "false"
         }],
         "text": "TestGroup",
         "id": "2",
         "dataType": "usergroup",
         "cls": null,
         "iconCls": "icon-group",
         "expandable": true,
         "dropable": "true"
     }
    My Grid:
    Code:
    this._gridPanel = Ext.create('Ext.grid.Panel', {
        id: 'usermanagergrid',
        collapsible: false,
        title: '@userlist@',
        store: this._store,
        multiSelect: false,
    
    
        enableDrag: true,
    
    
        dockedItems: [moduleToolbar],
        plugins: [rowEditing],
    
    
        viewConfig: {
            copy: true,
            emptyText: 'No Data to display',
            plugins: [dragPlugin]
        },
    
    
    
    
        columns: [ // ...
    My Tree
    Code:
    var dropPlugin = Ext.create('Ext.grid.plugin.DragDrop', {
        ddGroup: 'gridtotree',
        enableDrop: true
    });
    
    
    _this._treePanel = Ext.create('Ext.tree.Panel', {
        id: 'usersTreePanel',
        title: 'Admin Control Panel',
        store: userTreeStore,
        rootVisible: false,
        viewConfig: {
            plugins: [dropPlugin],
            listeners: {
    
    
                beforedrop: function (node, data, model, pos, drop) {
                    console.log(node);
                    console.log(model);
                    console.log(pos);
                    console.log(drop);
    
    
                    var record = data.records[0];
                    var droppedUser = record.data;
                    console.log(droppedUser);
                }
            }
        }
    });
    Now i have several Questions:
    1) If I drop a user into the tree, I get the following error and don't have any idea why:
    Uncaught TypeError: Object[object Object] has no method 'getDepth'

    2) How do I tell an item in the Tree, that it accepts drop. It only should be allowed to drop a new user into a group -> release the mouse on a group-item. On mouseover a user-item, the cursor should turn to the forbidden-sign.
    As you can see, I tryed the parameter "dropable": "false" in my JSON but it doesn't help.
    new to ExtJS

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Good example of how to do it, just replace one grid with a tree and possible other things

    http://docs.sencha.com/ext-js/4-0/#!...d_to_grid.html
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default


    I took a look at the 'two-trees.js' example, but it's not really informative, because it's too simple.

    Regarding on my situation, a GridPanel and a Tree:
    The interesting thing: There is a difference in behavior between the two options of how the drag&drop plugin can be added. This is leading to even more confusion :-(
    If a add it via an own instance
    "var dragPlugin = Ext.create('Ext.grid.plugin.DragDrop', { ... "
    or adding it via ptype
    "plugins: {ptype: 'gridviewdragdrop', ..."
    At one case, a green line shows up at the drop target(the tree), at the other case, no line apears. strange ...
    But that's not really a problem right now.

    My problem is, that i'm still unable, to drop my grid-data into the tree.
    I think, one of the issues is, that the source data object is different from the destination data object.
    So i guess, the tree can't 'read' the dropped date.
    My idea was to catch the dropped item at the (viewConfig) listener:beforedrop ... nice idea but it doesn't respond / doesn't get fired.

    Now I'm really planless ...
    new to ExtJS

Thread Participants: 1