Extjs 4.1.1:Grid to Tree拖放不起作用

时间:2014-06-20 09:19:57

标签: extjs drag-and-drop tree grid extjs4.1

我想实现这样的目标:

http://jsfiddle.net/mgill21/3HJXX/2/

但是每当我将一个节点从网格放入树列(作为叶子节点)时,我会收到诸如node.updateInfo() is undefined和其他节点相关的未定义方法之类的错误。

这是我的代码:

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 ]   
});

请帮忙。很久以后就被困住了。

1 个答案:

答案 0 :(得分:0)

为了帮助你解决这个错误,我发送了两个链接。这些不是正确的解决方案,但肯定会指导你一个方法。 First Link Second Link