PDA

View Full Version : Tree Drag'n'Drop without selecting/clicking



lukaslentner
9 Sep 2010, 4:08 AM
Hi guys,

my tree works great with one exception:
When I want to move a node also a click event is done and it loads content to the content panel. I would like to be able to move a node without selecting it and triggering the click event.

Here my code:


Ext.namespace('pInv.folders');

pInv.folders.Tree = Ext.extend(Ext.tree.TreePanel, {

constructor: function() {

pInv.folders.Tree.superclass.constructor.call(this, {
border: false,
id: 'FolderTree',
containerScroll: true,
ddScroll: true,
autoScroll: true,
selModel: new Ext.tree.DefaultSelectionModel(),
loader: new Ext.tree.TreeLoader({
dataUrl: '../server/folders/getAsNodes.php',
listeners: {
beforeload: function(treeLoader, node, callback) {

treeLoader.waitBox = Ext.MessageBox.wait('Der Navigationsbaum wird vom Server geholt ...', 'Serververbindung');

treeLoader.baseParams.data = Ext.util.JSON.encode({});
treeLoader.baseParams.login = Ext.util.JSON.encode(pInv.LoginWindow.getLoginData());

},
load: function(treeLoader, node, response) {

treeLoader.waitBox.hide();

},
loadexception: function(treeLoader, node, response) {

treeLoader.waitBox.hide();

Ext.MessageBox.show({
title: 'Serverfehler',
msg: unescape(response.statusText),
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});

}
}
}),
root: new Ext.tree.TreeNode(),
rootVisible: false,
enableDD: true,
dropConfig: {
appendOnly: true
},
listeners: {
click: function(node, event) {

if(node == undefined) {

Ext.getCmp('GridRegion').layout.setActiveItem('BlankGrid');

} else if(node.attributes.folder.id == 'search') {

Ext.getCmp('ItemGrid').getStore().load({
params: {
data: Ext.util.JSON.encode({
pattern: [
{
subject: 'any',
comparator: 'has',
value: Ext.getCmp('SearchField').getSearchString()
}
]
})
}
});

} else if(node.attributes.folder.id == 'freeProperty') {

Ext.getCmp('FreePropertyGrid').getStore().load();

} else if(node.attributes.folder.id == 'user') {

Ext.getCmp('UserGrid').getStore().load();

} else {

Ext.getCmp('ItemGrid').getStore().load({
params: {
data: Ext.util.JSON.encode({
pattern: [
{
subject: 'parentFolderId',
comparator: 'is',
value: node.attributes.folder.id
}
]
})
}
});

}

},
contextmenu : function(node, event) {

event.stopEvent();

if(pInv.LoginWindow.getRole() == 0) {
return false;
}
if(node.attributes.folder.id == 'search') {
return false;
}

var contextmenu = new Ext.menu.Menu({
items: [
new Ext.menu.Item({
text: 'Bearbeiten',
iconCls: 'x-menu-edit',
disabled: node.attributes.folder.parentFolderId == '0',
handler: function(button, event) {
new pInv.folders.EditWindow(node.attributes.folder);
}
}),
new Ext.menu.Item({
text: 'Löschen',
iconCls: 'x-menu-remove',
disabled: node.attributes.folder.parentFolderId == '0',
handler: function(button, event) {
new pInv.folders.RemoveDialog([node.attributes.folder]);
}
}),
new Ext.menu.Separator(),
new Ext.menu.Item({
text: 'Neu',
iconCls: 'x-menu-new',
handler: function(button, event) {
new pInv.folders.NewWindow(node.attributes.folder);
}
})
]
});
var coords = event.getXY();
contextmenu.showAt([coords[0] + 5, coords[1] + 5]);

},
nodedragover: function(dragOverEvent) {

if(pInv.LoginWindow.getRole() == 0) {
return false;
}

if(dragOverEvent.dropNode.attributes.folder.parentFolderId == '0') {
return false;
}

if(dragOverEvent.target.attributes.folder.type == dragOverEvent.dropNode.attributes.folder.type) {
return true;
}

return false;

},
beforenodedrop: function(dropEvent) {

new pInv.folders.Move([dropEvent.dropNode.attributes.folder], dropEvent.target.attributes.folder);
dropEvent.dropStatus = true;

return false;

}
}
});

this.sorter = new Ext.tree.TreeSorter(this, {
caseSensitive: false,
sortType: function(node) {

if(node.attributes.folder.parentFolderId == '0') {

if(node.attributes.folder.id == 'search') {

return '0';

} else if(node.attributes.folder.id == 'freeProperty') {

return '998';

} else if(node.attributes.folder.id == 'user') {

return '999';

} else {

return node.attributes.folder.id;

}

} else {

return node.attributes.folder.name.toLowerCase();

}

}
});

}

});

Any clue?

Thankx
Lukas

lukaslentner
12 Nov 2010, 12:47 AM
Ok, I did it with a flag called
nodeWasClicked

alwintom
19 Oct 2011, 7:21 PM
The problem with flag method is, this will cause node.select() method to fail after a drag drop.


Ext.override(Ext.tree.TreeDragZone, {
lastClickAt: null,
b4MouseDown : function(e){
var sm = this.tree.getSelectionModel();
this.lastClickAt = e.getXY();
if(sm != null)
sm.suspendEvents(true);
Ext.tree.TreeDragZone.superclass.b4MouseDown.apply(this, arguments);
}
});

Ext.override(Ext.tree.TreeDragZone, {
onMouseUp : function(e){
var sm = this.tree.getSelectionModel();
var loc = e.getXY();
if(sm != null && (this.lastClickAt == null || (this.lastClickAt[0] == loc[0] && this.lastClickAt[1] == loc[1])) )
sm.resumeEvents();
else{
sm.clearEventQueue();
sm.resumeEvents();
}
Ext.tree.TreeDragZone.superclass.onMouseUp.apply(this, arguments);
}
});

Ext.override(Ext.tree.DefaultSelectionModel, {
clearEventQueue : function() {
var me = this;
delete me.eventQueue;
}
});