Question

几天后，我尝试将ExtJs ['Grid to Tree Drag-Drop'示例] [1]更改为双向工作。但我得到的只是一个“差不多”的应用程序。

现在它可以工作，因为我可以将项目从网格拖到树，树内，网格内，但如果我将它从树拖到网格，它不会下降。它只显示绿色钩子。

我也尝试将ddGroup与树和网格区分开来，但之后就没有任何工作了。这对于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
                        }
                });
            }
        }
    }
    }]
    });

Answer 1

您需要实现网格的onNodeDrop事件。见http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.header.DropZone-method-onNodeDrop

从网格拖放到树和向后

1 个答案: