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
    36,754
    Vote Rating
    828
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi