Extjs 从网格到树并向后拖放

几天后，我尝试将ExtJs['Grid to Tree Drag and Drop'Example][1]更改为双向工作。但我得到的只是一个“几乎”正常工作的应用程序

现在，我可以将一个项目从一棵树拖到另一棵树，在树内，在网格内，但如果我将它从一棵树拖到另一棵树，它就不会掉下来。它只是显示了绿色钩

我还试图将ddGroup与tree和grid区别开来，但之后一切都不起作用了。 这对于ExtJs初学者来说太多了

// Stücklisten Grid
stuecklistengrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:itemPartStore
,columns:[{
id:'PART_ITE_ID'
,header:"PART_ITE_ID"
,width:200, sortable:true
,dataIndex:'PART_ITE_ID'
},{
header:"IS_EDITABLE"
,width:100
,sortable:true
,dataIndex:'IS_EDITABLE'
},{
header:"IS_VISIBLE"
,width:100
,sortable:true
,dataIndex:'IS_VISIBLE'
}]
,viewConfig:{forceFit:true}
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});
// call parent
stuecklistengrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
// call parent
stuecklistengrid.superclass.onRender.apply(this, arguments);

// load the store
this.store.load({params:{start:0, limit:10}});

} // eo function onRender

});
Ext.reg('examplegrid', stuecklistengrid);


// Stücklisten Tree
var CheckTree = new Ext.tree.TreePanel({
    root:{    text:'root', id:'root', expanded:true, children:[{
            text:'Folder 1'
            ,qtip:'Rows dropped here will be appended to the folder'
            ,children:[{
            text:'Subleaf 1'
            ,qtip:'Subleaf 1 Quick Tip'
            ,leaf:true
            }]
            },{
            text:'Folder 2'
            ,qtip:'Rows dropped here will be appended to the folder'
            ,children:[{
            text:'Subleaf 2'
            ,qtip:'Subleaf 2 Quick Tip'
            ,leaf:true
            }]
            },{
            text:'Leaf 1'
            ,qtip:'Leaf 1 Quick Tip'
            ,leaf:true
            }]},
    loader:new Ext.tree.TreeLoader({preloadChildren:true}),
    enableDD:true,
    ddGroup:'grid2tree',
    id:'tree',
    region:'east',
    title:'Tree',
    layout:'fit',
    width:300,
    split:true,
    collapsible:true,
    autoScroll:true,
    listeners:{
    // create nodes based on data from grid
    beforenodedrop:{fn:function(e) {
    // e.data.selections is the array of selected records
    if(Ext.isArray(e.data.selections)) {

    // reset cancel flag
    e.cancel = false;

    // setup dropNode (it can be array of nodes)
    e.dropNode = [];
    var r;
    for(var i = 0; i < e.data.selections.length; i++) {

    // get record from selectons
    r = e.data.selections[i];

    // create node from record data
    e.dropNode.push(this.loader.createNode({
    text:r.get('PART_ITE_ID')
    ,leaf:true
    ,IS_EDITABLE:r.get('IS_EDITABLE')
    ,IS_VISIBLE:r.get('IS_VISIBLE')
    }));
    }

    // we want Ext to complete the drop, thus return true
    return true;
    }

    // if we get here the drop is automatically cancelled by Ext
    }}
    }
});

// Stücklisten Container
var itemPartList = new Ext.Container({
    id: 'itemPartList',
    title: 'Stücklisten',
    border:false,
    layout:'border',
    items:[CheckTree, {
    xtype:'examplegrid'
    ,id:'SLgrid'
    ,title:'Grid'
    ,region:'center'
    ,layout:'fit'
    ,enableDragDrop:true
    ,ddGroup:'grid2tree'
    ,listeners: {
        afterrender: {
            fn: function() {
                // This will make sure we only drop to the view scroller element
                SLGridDropTargetEl2 = Ext.getCmp('SLgrid').getView().scroller.dom;
                SLGridDropTarget2 = new Ext.dd.DropTarget(SLGridDropTargetEl2, {
                        ddGroup    : 'grid2tree',
                        notifyDrop : function(ddSource, e, data){
                                var records =  ddSource.dragData.selections;
                                Ext.each(records, ddSource.grid.store.remove,  
ddSource.grid.store);
                                Ext.getCmp('SLgrid').store.add(records);
                                return true
                        }
                });
            }
        }
    }
    }]
    });

//Stücklisten网格
stuecklistengrid=Ext.extend（Ext.grid.GridPanel{
initComponent:function（）{
变量配置={
商店：itemPartStore
，专栏：[{
id:“零件现场id”
，标题：“零件现场ID”
，宽度：200，可排序：true
，数据索引：'PART\u ITE\u ID'
},{
标题：“是否可编辑？”
，宽：100
，可排序：true
，数据索引：'可编辑'
},{
标题：“是否可见？”
，宽：100
，可排序：true
，数据索引：'IS_VISIBLE'
}]
，viewConfig:{forceFit:true}
}；//eo配置对象
//应用配置
Ext.apply（this，Ext.apply（this.initialConfig，config））；
this.bbar=新的Ext.PagingToolbar({
商店：这个。商店
，displayInfo:true
，页面大小：10
});
//打电话给家长
stuecklistengrid.superclass.initComponent.apply（这是参数）；
}//eo函数初始化组件
，onRender:function（）{
//打电话给家长
stuecklistengrid.superclass.onRender.apply（这是参数）；
//加载存储
load（{params:{start:0，limit:10}}）；
}//eo函数onRender
});
Ext.reg（'examplegrid'，stuecklistengrid）；
//Stücklisten树
var CheckTree=new Ext.tree.TreePanel({
根：{text:'root'，id:'root'，扩展：true，子项：[{
文本：“文件夹1”
，qtip:“此处放置的行将附加到文件夹”
，儿童：[{
正文：'SUBELAF 1'
，qtip:'Subbaf 1快速提示'
，叶：是的
}]
},{
文本：“文件夹2”
，qtip:“此处放置的行将附加到文件夹”
，儿童：[{
正文：'SUBELAF 2'
，qtip:'Subbaf 2快速提示'
，叶：是的
}]
},{
正文：“叶1”
，qtip:“叶1快速提示”
，叶：是的
}]},
加载器：新的Ext.tree.TreeLoader（{preload-children:true}），
enableDD:true，
ddGroup:“grid2tree”，
id:“树”，
地区：'东'，
标题:"树",，
布局：'适合'，
宽度：300，
斯普利特：是的，
可折叠的：是的，
autoScroll：是的，
听众：{
//基于网格中的数据创建节点
beforenodedrop:{fn:function（e）{
//e.data.selections是所选记录的数组
if（Ext.isArray（如数据选择））{
//重置取消标志
e、 取消=假；
//设置dropNode（可以是节点阵列）
e、 dropNode=[]；
var-r；
对于（变量i=0；i

您需要实现网格的onNodeDrop事件。看