extjs 4 grid to tree drag drop

Question

i am working with grid to tree drag n drop. i am able to add new node to root of tree by dragging it from grid but i dont know how to add child to node i hovered on? I spent 2 days on dis but no luck.below is my code :

  Ext.define('Overdrive.view.ui.MyViewport', {
        extend: 'Ext.container.Viewport',
        initComponent: function () {
            var me = this;
            me.items = [{
                xtype: 'panel',
                height: 600,
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                title: 'PARENT',
                items: [{
                    xtype: 'treepanel',
                    border: '',
                    id: 'treepanel',
                    collapseDirection: 'left',
                    collapsible: true,
                    title: 'Items',
                    titleCollapse: true,
                    store: 'Test',
                    flex: 1,
                    viewConfig: {
                        listeners: {
                            render: function (tree) {
                                var dropTarget = new Ext.dd.DropTarget(tree.el, {
                                    ddGroup: 'gridtotree',
                                    copy: false,

                                    notifyDrop: function (dragSource, event, data) {
                                        var idFrom = data.records[0].data.name;
                                        var node = Ext.getCmp('treepanel').getRootNode(); //working
                                        node.appendChild({
                                            'text': idFrom,
                                            'children': []
                                        });


                                    }
                                });
                            }
                        }
                    }
                }, {
                    xtype: 'panel',
                    height: 596,
                    flex: 3,
                    items: [{
                        xtype: 'panel',
                        height: 285,
                        layout: {
                            type: 'anchor'
                        }
                    }, {
                        xtype: 'gridpanel',
                        id: 'itemtypegrid',
                        title: 'Item Type',
                        store: 'GridTest',
                        enableDragDrop: true,
                        ddText: 'Shift Row',
                        columns: [{
                            xtype: 'gridcolumn',
                            width: 100,
                            dataIndex: 'name',
                            text: 'Name'
                        }],
                        viewConfig: {
                            plugins: [
                            Ext.create('Ext.grid.plugin.DragDrop', {
                                ddGroup: 'gridtotree',
                                enableDrop: true
                            })]
                        }
                    }]
                }]
            }];
            me.callParent(arguments);
        }

AlexDi AlexDi · Accepted Answer · 2011-12-13T10:05:25

To catch the tree-node you can add this handler to Tree.Panel -> ViewConfig -> listeners:

itemmouseenter: function (view, model, htmlItem, index, e)
{
 console.log(model);
},

You can save this value and use in another handler - notifyDrop

extjs 4 grid to tree drag drop

1 Answers