PDA

View Full Version : Drag and drop from Grid to Tree and back - need help



fletchergirl
20 Sep 2012, 7:30 AM
Hello everybody,

I'm an ExtJs dummy trying to make Saki's DnD Grid to Tree Example work in both directions.
Tried to use the grid to grid example too, but now I don't know how to go on.
It works to drag an tree item to the grid but it keeps sticked to the cursor.
ddSource.dragData.selections is undefined
I can't find anything in the documentation either.
Since I'm a beginner, the script is really hard to understand. :">
Can anyone help?
Thanx!



Example.Grid = 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
Example.Grid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {

// call parent
Example.Grid.superclass.onRender.apply(this, arguments);

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

} // eo function onRender

});
Ext.reg('examplegrid', Example.Grid);


// 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}),
loader: new Ext.tree.TreeLoader({dataUrl:'../../../database/articles/getItemPartsTree.php?ite_id='+currentITE_ID}),
enableDD:true,
ddGroup:'tree2grid',
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
}}
}
});

var itemPartList = new Ext.Container({
id: 'itemPartList',
title: 'Stücklisten',
border:false,
layout:'border',
items:[CheckTree, {
xtype:'examplegrid'
,id:'grid'
,title:'Grid'
,region:'center'
,layout:'fit'
,enableDragDrop:true
,ddGroup:'tree2grid'
,view : new Ext.grid.GridView({
sortAscText : 'Aufsteigend Sortieren',
sortDescText : 'Absteigend Sortieren',
columnsText: 'Spalten'
})
,listeners:{
afterrender: {
fn: function(grid) {
GridDropTargetEl1 = grid.getView().scroller.dom;
GridDropTarget1 = new Ext.dd.DropTarget(GridDropTargetEl1 , {
ddGroup : 'tree2grid',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
grid.store.add(records);
grid.store.sort('NAME', 'ASC');
return true
}
});
}
}
}
}]
});

fletchergirl
20 Sep 2012, 7:47 AM
Solved it with the help of another post :)

http://www.sencha.com/forum/showthread.php?42762-Looking-for-demo-Drag-and-Drop-from-Tree-to-Grid/page2