Extjs 4.1.1: Grid to Tree drag drop not working

Question

I want to achieve something like this :

But I whenever I drop a node from grid into the treecolumn (as a leaf node) I get errors such as node.updateInfo() is undefined and other node related undefined method.

Here is my code:

Ext.namespace('Ext.ux.window.ConfigureMobileApp');
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);

var firstGridStore = Ext.create('Ext.data.Store', {
storeId : 'formStore',
fields : [ 'name', 'type', 'itemId' ],
data : [ {
    name : "Michael Scott",
    itemId : 7,
    type : "Management"
}, {
    name : "Dwight Schrute",
    itemId : 2,
    type : "Sales"
}, {
    name : "Jim Halpert",
    itemId : 3,
    type : "Sales"
}, {
    name : "Kevin Malone",
    itemId : 4,
    type : "Accounting"
}, {
    name : "Angela Martin",
    itemId : 5,
    type : "Accounting"
} ]
});

// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
viewConfig : {
    plugins : {
        ptype : 'gridviewdragdrop',
        ddGroup : 'selDD'
    }
},
store : Ext.data.StoreManager.lookup('formStore'),
columns : [ {
    text : "Name",
    flex : 1,
    sortable : true,
    dataIndex : 'name'
}, {
    text : "Type",
    width : 70,
    sortable : true,
    dataIndex : 'type'
} ],
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0',
width : 200
});

 Ext.define('Resource', {
extend : 'Ext.data.Model',
fields : [ {
    name : "name",
    type : "string"
}, {
    name : "type",
    type : "string"
} ]
});

var store1 = Ext.create('Ext.data.TreeStore', {
storeId : 'treeStore',
fields : [ 'name', 'type', 'itemId' ],
root : {
    expanded : true,
    children : [ {
        itemId : 171,
        type : "comedy",
        name : "Mr Bean",
        children : [ {
            leaf : true,
            itemId : 171,
            type : "actor",
            name : "Rowan Atkinson"
        } ],
    }, {
        itemId : 11,
        type : "fantasy",
        name : "Harry Potter",
        children : [ {
            itemId : 11,
            leaf : true,
            type : "actress",
            name : "Emma Watson",
        } ]
    }, {
        itemId : 173,
        type : "Action",
        name : "Fast and Furious",
        children : [ {
            itemId : 174,
            type : "actor",
            name : "Dwayne Johnson",
            children : [ {
                leaf : true,
                itemId : 175,
                type : "wrestler",
                name : "The Rock"
            } ]
        } ]
    } ]
}
});

Ext.define('Ext.ux.window.TreeGrid', {
extend : 'Ext.tree.Panel',
title : 'Demo',
height : 300,
rootVisible : true,
singleExpand : true,
store : Ext.data.StoreManager.lookup('treeStore'),
columns : [ {
    xtype : 'treecolumn',
    text : 'Name',
    dataIndex : 'name',
    width : 200
}, {
    text : 'Type',
    dataIndex : 'type'
} ],
initComponent : function() {
    this.callParent();
},
viewConfig : {
    plugins : {
        ptype : 'treeviewdragdrop',
        ddGroup : 'selDD'
    },
    listeners : {
        beforedrop : function(node, data) {
            debugger;
            data.records[0].set('leaf', true);
            data.records[0].set('expanded', false);
            data.records[0].set('checked', true);
        },
        drop : function(node, data, dropRec, dropPosition) {
            // firstGridStore.store.remove(data.records[0]);
        }
    }
}
});

var secondTree = Ext.create('Ext.ux.window.TreeGrid');

Ext.define('Ext.ux.window.ConfigureMobileApp', {
extend : 'Ext.window.Window',
title : 'Configure Mobile App',
height : 600,
width : 600,
layout : 'hbox',
modal : true,
closeAction : 'hide',
items : [ firstGrid, secondTree ]   
});

Please help. Stuck since a very long time.

abc abc · Accepted Answer · 2014-06-29T18:23:28

To help u out with this error i m sending u two links .These are not the proper solution but will surely guide u a way for that. First Link Second Link

Extjs 4.1.1: Grid to Tree drag drop not working

1 Answers