PDA

View Full Version : Grid to Tree DnD



badgerd
4 Jul 2007, 5:56 PM
I have a grid and tree defined as below -



navTree = new Tree.TreePanel('el_EmailFolder', {
animate:true,
rootVisible: false,
lines:false,
loader: new Tree.TreeLoader({dataUrl:'resources/retrieveEmailFolders.cfm'}),
ddGroup : 'gridTreeDD',
enableDrop:true,
containerScroll: true
});

.......................

grid = new Ext.grid.Grid('el_emailgrid', {
ds: ds,
cm: cm,
enableDrag:true,
ddGroup : 'gridTreeDD',
loadMask: {msg: 'Retrieving emails...'}
});


I have tried searching for the best possible method to enable dragging a grid row into a tree node and passing the grid row id - what is the best way to achieve this? Does anyone have any code that I can duplicate to make this work?

badgerd
5 Jul 2007, 3:11 PM
Anyone?

dearsina
12 Aug 2008, 9:32 AM
Did you ever find a solution? Is there an example I can look at? Can anybody else help?

edokan
12 Jun 2009, 3:10 AM
Hi,

after digging forums i found the solution. thanks to jack (as usual).

set properties of tree


enableDD: true,
ddGroup: 'myGroup', // this will be our drag and drop group


set properties of grid


enableDragDrop: true,
ddGroup: 'myGroup',


attach to before drop event so, you can convert grid row to tree node


tree.on('beforenodedrop', function(e) {
var s = e.data.selections, r = [];
for (var i = 0, len = s.length; i < len; i++) {
r.push(new Ext.tree.TreeNode({ // build array of TreeNodes to add
allowDrop: false,
text: s[i].data.name,
id: s[i].data.id
}));
}
e.dropNode = r; // return the new nodes to the Tree DD
e.cancel = r.length < 1; // cancel if all nodes were duplicates
});



that's it. i hope it will help.

extjs_new
6 Jan 2010, 12:25 PM
hi, how would I cancel the drop?
i have this function:

,InsertAppendMoveNode:function(e, id, text) {

var SuccessInsert = true;
//this is the variable I wanted to alter in my callback function


Ext.Ajax.request({
url : 'process-request.php',
method : 'POST',
timeout : 120000,
params : {
cmd:'InsertAppendMoveNode',
id:id,
point:e.point,
target:e.target.id,
text:text,
treeId:1,
treeTable:'tree'
},
success: function(response, request){
var result=Ext.util.JSON.decode(response.responseText).success;
switch(result){
case "true":
Ext.MessageBox.alert('Successful','Drag from grid and drop to teepanel is successful');
break;
default:
var errmsg = Ext.util.JSON.decode(response.responseText).error;
if (errmsg) {
Ext.Msg.show({
title:'Error insering new node',
msg: errmsg,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
//how can I change value of my variable SuccessInsert which is declared outside EXt.Ajax request function

SuccessInsert = false;
}
break;
} //switch(result){
},

failure: function(response){
var result=response.responseText;
Ext.MessageBox.alert('failure',result);
//how can I change value of my variable SuccessInsert which is declared outside my EXt.Ajax request function

SuccessInsert = false;
},
callback:function(options,success,resp){
var result=Ext.decode(resp.responseText);

if(result.success)
//how can I change value of my variable SuccessInsert which is declared outside my callback function
SuccessInsert = true;
else
SuccessInsert = false;

}

});

//here it always return SuccessInsert true
return SuccessInsert;

}



Question: How can I change a value of SuccessInsert in my callback function? Or even in my success or failure function.

Thanks