PDA

View Full Version : Treepanel with "nodedragover" and "beforeremove" events problems



Maxrunner
12 Apr 2010, 6:25 AM
Hi! im having some issues these events on a treepanel with dragn drop and remove node options.
The problem is i have configured the drop config, but this event is also called when i remove a node from the tree. The other problem is that the "beforeremove" event doesnt get cancelled if return false.
Here's the code:



Ext.onReady(function(){

///////////////////////////////////
//template for details panel body//
///////////////////////////////////
var pnlBody='Drop node here for Details';
var tpl=new Ext.Template('<p class="">{0}</p>');
tpl.compile();

//////////////////////////////////////
//button to remove all checked nodes//
//////////////////////////////////////
var buttonRemoveCheckedNodes=new Ext.Button({
text :'Remove Checked Nodes',
handler:function(){
var chkNodes=tree.getChecked();
for(var i=0;i<chkNodes.length;i++){
chkNodes[i].remove();
}
}});
//////////////////////////////
//button to expand all nodes//
//////////////////////////////
var buttonExpandAll=new Ext.Button({
text :'Expand All Nodes',
handler:function(){
tree.expandAll();

}});
/////////////////
//new TreePanel//
/////////////////
var tree = new Ext.tree.TreePanel({
id : 'treeCheck',
region : 'center',
//header : true,
// title : 'Arvore',
width : 240,
autoScroll : true,
animate : true,
enableDD : true,
ddScroll : true,
ddGroup : 'classic',
useArrows : true,
ddAppendOnly: true,
rootVisible : false,
containerScroll: true,
border : false,
root : rootNodes,
contextMenu : new Ext.menu.Menu({
items : [{
itemId : 'delete-node',
text : 'Delete Node'
},{
itemId : 'info',
text : 'Dados Ficheiro'
}],
listeners : {
itemclick: function(item) {
switch (item.itemId) {
case 'delete-node':
var n = item.parentMenu.contextNode;
if (n.parentNode) {n.remove();}
break;
case 'info':
var n= item.parentMenu.contextNode;
new Ext.Window({
title:'Informação/Detalhes',
closable:true,
bodyStyle : 'padding: 10px',
html:'<div>Tamanho:'+n.attributes.size+'</div></br><div>Data:'+n.attributes.date+'</div>'}
).show();

break;
}
}
}
}),
/////////////////////
//listenener events//
/////////////////////
listeners: {
contextmenu: function(node, e) {
//Register the context node with the menu so that a Menu Item's handler function can access
//it via its parentMenu property.
node.select();
var c = node.getOwnerTree().contextMenu;
c.contextNode = node;
c.showAt(e.getXY());
///////////////////////////////////////////////////
},//check/uncheck childnodes when checking one node//
///////////////////////////////////////////////////
checkchange: function(n, checked){
if(n.attributes.checked!=false)
n.expand();
n.expandChildNodes(true);
n.eachChild(function(child){
child.ui.toggleCheck(checked);
child.fireEvent('checkchange', child, checked);
})
///////////////////////////
},//node drag'n drop config//
///////////////////////////
nodedragover: function(nodeConf){
var a=0;
//cancel node drop according to these rules
switch(nodeConf.dropNode.attributes.cls){
case 'doc' :
if(nodeConf.target.attributes.cls!='vol')
nodeConf.cancel=true;
//a=1;
break;
case 'vol' :
if(nodeConf.target.attributes.cls!='file')
nodeConf.cancel=true;
break;
case 'file' :
if(nodeConf.target.attributes.cls!='cls')
nodeConf.cancel=true;
break;
case 'cls' :
nodeConf.cancel=true;
break;

}
if(a==1)nodeConf.cancel=true;
},
//////////////////////////////////////
//tree event for server side updates//
//////////////////////////////////////
beforenodedrop: function(dropEvent){
alert("drop:"+dropEvent.dropNode.attributes.text+" alvo:"+dropEvent.target.attributes.text);
//dropEvent.cancel=true; prevents node from dropping to target.

}
},
tbar:[buttonRemoveCheckedNodes,buttonExpandAll]//toolbar buttons

});


tree.on('beforedestroy',function(tree,parent, node){

alert(node);
return false;
});

new Ext.Panel({
title : 'Dragn Drop check tree nodes',
renderTo: 'test',
layout : 'border',
width : 500,
height : 500,
items : [tree, new Ext.Panel({
region : 'east',
id : 'details-panel',
autoScroll : true,
split : true,
width : 240,
border : false,
html : pnlBody,
baseCls : 'x-box-mc',
bodyStyle : 'padding: 10px; background-color: #FFFFFF'

})]


});

var detailsPanel= Ext.getCmp('details-panel');
var pnlDropTargetEl= detailsPanel.body;
var pnlDropTarget = new Ext.dd.DropTarget(pnlDropTargetEl,
{
ddGroup :'classic',
copy : false,
////////////////////////////////////////////////
//while dragging in the drop zone change color//
////////////////////////////////////////////////
notifyEnter : function(ddSource, e, data) {
//Add some flare to invite drop.
detailsPanel.body.stopFx();
detailsPanel.body.highlight("E7E8E9");
},
////////////////////////////////////////////////////////////////////////////
//when dropping in the target zone refresh node content data to panel body//
////////////////////////////////////////////////////////////////////////////
notifyDrop: function(ddSource, e, data){

var el= detailsPanel.body;
//write node attributes by
tpl.overwrite(el,['Tipo :' +data.node.attributes.cls + '</br>'+
'Nome :' +data.node.attributes.text + '</br>'+
'Data :' +data.node.attributes.date + '</br>'+
'Tamanho:' +data.node.attributes.size
]);
return true;

}
});

//tree.getRootNode().expand(true);

});

</script>

<div id='test'></div>