PDA

View Full Version : Drag from Grid to Tree



amegahed
26 Aug 2009, 5:44 PM
I made sort of a folder browser, where I have Treepanel on the left side listing the folders and a GridPanel in center. Now I want to be able to move files from the grid and drop them into a folder in the tree. I have enabled the drop in my tree:


var treeMyFiles = new Ext.tree.TreePanel({
region : 'west',
width : 350,
useArrows : true,
autoScroll : true,
animate : true,
enableDrop : true,
containerScroll : true,
border : true,
split : true,
collapsible : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'php/myfiles.php',
baseParams : { action: 101}
}),
root : new Ext.tree.AsyncTreeNode({
text : 'My Folders'
}),
listeners : {
click: function(node, event){
while(node.firstChild) {
node.removeChild(node.firstChild);
}

dsMyFilesList.load({
params: {
action : 102,
folderpath : '/var/www/' + node.attributes.path
}
});
Ext.Ajax.request({
url : 'php/myfiles.php',
method : 'POST',
timeout : 120000,
params : {
action : '103',
folderpath : '/var/www/' + node.attributes.path,
nodeid : node.id
},
success: function(response, request){
Ext.each(Ext.decode(response.responseText), function(a){
node.appendChild(new Ext.tree.TreeNode({text: a.text, id: a.id, leaf: a.leaf, path: a.path, cls: a.cls}));
}
);
},
scope: this
});
node.expand(true);
}
}
});


and also enabled dragdrop in my grid:


var gridMyFiles = new Ext.grid.EditorGridPanel({
region : 'center',
store : dsMyFilesList,
enableDragDrop : true,
cm : cmMyFiles,
sm : smMyFiles,
autoExpandColumn: 'filename',
stripeRows : true,
loadMask : true,
split : true,
collapsible : true
});



I would like some help on how to proceed from here. I searched around and found similar posts to this, but honestly I could not understand much of them. If anyone could just direct me in the right direction it would be much appreciated :)

CutterBl
26 Aug 2009, 6:03 PM
Grid to Tree Drag & Drop is almost identical (almost) to Grid to Grid Drag & Drop. A look at the source of the G - G demo (http://www.extjs.com/deploy/dev/examples/dd/dnd_grid_to_grid.html), on the Samples & Demos (http://www.extjs.com/deploy/dev/examples/samples.html) page, should give you a good starting point.

amegahed
26 Aug 2009, 6:41 PM
see, all i want to do is to capture one column from the grid (the id of the record) and the target folder from the tree, after that i will do the move progammatically; that is, the treepanel will not have anything added to it

amegahed
27 Aug 2009, 4:02 AM
I found this example by Saki (http://examples.extjs.eu/?ex=grid2treedrag) which helped me out in the part of dragging from the grid to the tree, where the code for the tree is now:


var treeMyFiles = new Ext.tree.TreePanel({
region : 'west',
width : 350,
useArrows : true,
autoScroll : true,
animate : true,
enableDD : true,
ddGroup : 'grid2tree',
containerScroll : true,
border : true,
split : true,
collapsible : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'php/myfiles.php',
baseParams : { action: 101}
}),
root : new Ext.tree.AsyncTreeNode({
text : 'My Folders'
}),
listeners : {
click: function(node, event){
while(node.firstChild) {
node.removeChild(node.firstChild);
}

dsMyFilesList.load({
params: {
action : 102,
folderpath : '/var/www/' + node.attributes.path
}
});
Ext.Ajax.request({
url : 'php/myfiles.php',
method : 'POST',
timeout : 120000,
params : {
action : '103',
folderpath : '/var/www/' + node.attributes.path,
nodeid : node.id
},
success: function(response, request){
Ext.each(Ext.decode(response.responseText), function(a){
node.appendChild(new Ext.tree.TreeNode({text: a.text, id: a.id, leaf: a.leaf, path: a.path, cls: a.cls}));
}
);
},
scope: this
});
node.expand(true);
},
beforenodedrop: {fn:function(e) {
if(Ext.isArray(e.data.selections)) {
e.cancel = false;
e.dropNode = [];
var r;
for(var i = 0; i < e.data.selections.length; i++) {
r = e.data.selections[i];
alert(r.get('filename'));
alert(e.dropNode.attributes.path);
}
return true;
}
}}
}

});



I still need to find out how to get the node that it was dropped on (the bolded line)

and the code for the grid is:


var gridMyFiles = new Ext.grid.EditorGridPanel({
region : 'center',
store : dsMyFilesList,
enableDragDrop : true,
ddGroup : 'grid2tree',
cm : cmMyFiles,
sm : smMyFiles,
autoExpandColumn: 'filename',
stripeRows : true,
loadMask : true,
split : true,
collapsible : true
});



still researching ....

amegahed
27 Aug 2009, 4:13 AM
I think i got it (thank to Saki's example - http://examples.extjs.eu/?ex=grid2treedrag )

My code now looks like this for the treepanel:


var treeMyFiles = new Ext.tree.TreePanel({
region : 'west',
width : 350,
useArrows : true,
autoScroll : true,
animate : true,
enableDD : true,
ddGroup : 'grid2tree',
containerScroll : true,
border : true,
split : true,
collapsible : true,
loader : new Ext.tree.TreeLoader({
dataUrl : 'php/myfiles.php',
baseParams : { action: 101}
}),
root : new Ext.tree.AsyncTreeNode({
text : 'My Folders'
}),
listeners : {
click: function(node, event){
while(node.firstChild) {
node.removeChild(node.firstChild);
}

dsMyFilesList.load({
params: {
action : 102,
folderpath : '/var/www/' + node.attributes.path
}
});
Ext.Ajax.request({
url : 'php/myfiles.php',
method : 'POST',
timeout : 120000,
params : {
action : '103',
folderpath : '/var/www/' + node.attributes.path,
nodeid : node.id
},
success: function(response, request){
Ext.each(Ext.decode(response.responseText), function(a){
node.appendChild(new Ext.tree.TreeNode({text: a.text, id: a.id, leaf: a.leaf, path: a.path, cls: a.cls}));
}
);
},
scope: this
});
node.expand(true);
},
beforenodedrop: {fn:function(e) {
if(Ext.isArray(e.data.selections)) {
e.cancel = false;
e.dropNode = [];
var r;
for(var i = 0; i < e.data.selections.length; i++) {
r = e.data.selections[i];
// => here i will add the function to move the file from source to dest.
alert(r.get('filename'));
alert(e.target.attributes.path);
}
return true;
}
}}
}

});



and my gridpanel:



var gridMyFiles = new Ext.grid.EditorGridPanel({
region : 'center',
store : dsMyFilesList,
enableDragDrop : true,
ddGroup : 'grid2tree',
cm : cmMyFiles,
sm : smMyFiles,
autoExpandColumn: 'filename',
stripeRows : true,
loadMask : true,
split : true,
collapsible : true
});


as far as i understand, the most important things where:
- enableDD : true in TreePanel and enableDragDrop : true in GridPanel
- set the ddGroup in both to the same thing
- set the beforenodedrop in the TreePanel's listeners

i now have only one issue left, its that after i drop the selected items from the grind onto the treepanel, the cursor remains locked in the drag mode (i.e. remains as 'selected items with the plus or x' until i click on the grid again ... how can i release the cursor after the drop has made?

CutterBl
27 Aug 2009, 10:24 AM
Release the cursor? That I don't know. Getting the ID of the node you are dropping on? The Ext.tree.TreePanel API docs (http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel) say that the 'beforenodedrop' event passes a single 'event' object with the following information contained:


tree - The TreePanel
target - The node being targeted for the drop
data - The drag data from the drag source
point - The point of the drop - append, above or below
source - The drag source
rawEvent - Raw mouse event
dropNode - Drop node(s) provided by the source OR you can supply node(s) to be inserted by setting them on this object.
cancel - Set this to true to cancel the drop.
dropStatus - If the default drop action is cancelled but the drop is valid, setting this to true will prevent the animated "repair" from appearing.