PDA

View Full Version : beforeremove treepanel



Darstan
7 Mar 2007, 1:44 PM
The beforeremove event doesn't cancel the remove when false is returned.

jack.slocum
8 Mar 2007, 6:50 AM
You need to provide more details. It works fine for me.

Darstan
8 Mar 2007, 1:03 PM
Maybe I'm not doing it right

I have two tree
and I'm trying to copy a node from one tree to the other without removing it fro the original.

It moves from one tree to the other correctly but the beforeremove on the origin tree is not working the way I would expect Here are the scripts for the trees


var CopyFromTree = function(){
// shorthand
var Tree = Ext.tree;

return {
tree: null,
tree2: null,
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel('copyTree', {
animate:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'treeAdmin.jsp',
baseParams: {lib:'From'} // custom http params
}),
enableDD:true,
containerScroll: true,
rootVisible: false,
dropConfig: {appendOnly:false}
});

this.tree = tree;
// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Applications',
draggable:false, // disable root node dragging
id:'allApplications'
});
tree.setRootNode(root);

// render the tree
tree.render();

tree.on('beforeremove', this.beforeRemove, this );
tree.on('beforemove', this.beforeMove, this);
tree.on('startdrag', this.startDrag, this);
tree.on('enddrag', this.endDrag, this);

root.expand(false, /*no anim*/ false);
},
beforeRemove : function(tree, node, childNode ){
return false;
},
beforeMove : function(tree, node, oldParent, newParent, index ){
;
},
startDrag : function (panel, node, e){
var root = ApplicationTree.tree.getRootNode();
if(node.id.indexOf("question:") != -1){
root.allowChildren = false;
} else if(node.id.indexOf("page:") != -1) {
for(var i =0; i < root.childNodes.length; i++)
root.childNodes[i].allowChildren = false;
}
},
endDrag : function (panel, node, e){
var root = ApplicationTree.tree.getRootNode();
if(node.id.indexOf("question:") != -1) {
root.allowChildren = true;
} else if(node.id.indexOf("page:") != -1) {
for(var i =0; i < root.childNodes.length; i++)
root.childNodes[i].allowChildren = true;
}
}
};
}();

Ext.EventManager.onDocumentReady(CopyFromTree.init, CopyFromTree, true);


var ApplicationTree = function(){
// shorthand
var Tree = Ext.tree;
var applicationContextMenu = new Ext.menu.Menu({
id: 'applicationContextMenu',
items: [
{text: 'New Page',handler: menuNewPage_onClick},
{text: 'Copy Page',handler: menuCopyPage_onClick}
]
});
var pageContextMenu = new Ext.menu.Menu({
id: 'pageContextMenu',
items: [
{text: 'New Question',handler: menuNewQuestion_onClick},
{text: 'Copy Question',handler: menuCopyQuestion_onClick},
{text: 'Delete', handler: menuDeletePage_onClick}
]
});
var questionContextMenu = new Ext.menu.Menu({
id: 'questionContextMenu',
items: [
{
text: 'New',
menu: {
items: [
{text: 'Answer', handler: menuNewQuestionAnswer_onClick},
{text: 'Rule', handler: menuNewQuestionRule_onClick}
]
}
},
{text: 'Delete', handler: menuDeleteQuestion_onClick}
]
});

var triggeringNode = null;

function menuNewPage_onClick(item) {
triggeringNode.id
Ext.get('general').dom.src = 'pageAdmin.jsp?APP_ID='+ triggeringNode.id.replace('app:','');
}

function menuCopyPage_onClick(item) {
alert(item.text);
}

function menuNewQuestion_onClick(item) {
alert(item.text);
}

function menuCopyQuestion_onClick(item) {
alert(item.text);
}

function menuNewQuestionAnswer_onClick(item) {
alert(item.text);
}

function menuNewQuestionRule_onClick(item) {
alert(item.text);
}

function menuDeletePage_onClick(item) {
alert(item.text);
}

function menuDeleteQuestion_onClick(item) {
alert(item.text);
}

return {
tree: null,
init : function(){
// yui-ext tree
var tree = new Tree.TreePanel('tree', {
animate:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'treeAdmin.jsp',
baseParams: {lib:'workingApp'} // custom http params
}),
enableDD:true,
containerScroll: true,
rootVisible: true,
dropConfig: {appendOnly:false}
});

this.tree = tree;
// set the root node
var root = new Tree.AsyncTreeNode({
text: appName,
draggable:false,
id:'app:'+appId
});

tree.setRootNode(root);

// render the tree
tree.render();

tree.on('contextmenu', this.menuShow, this);

tree.on('move', this.onMove, this);
tree.on('startdrag', this.startDrag, this);
tree.on('enddrag', this.endDrag, this);

tree.on('beforeclick', function(node){
var el = Ext.get('general').dom;
if(node.id.indexOf('page:') != -1){
el.src = 'pageAdmin.jsp?PAGE_ID='+node.id.replace('page:','');
} else if(node.id.indexOf('question:') != -1){
el.src = 'questionAdmin.jsp?QUESTION_ID='+node.id.replace('question:','');
} else if(node.id.indexOf('app:') != -1){
el.src = 'applicationAdmin.jsp?APP_ID='+node.id.replace('app:','');
}
});

root.expand(false, /*no anim*/ false);
},
menuShow : function( node ){
triggeringNode = node;
if(node.id.indexOf('page:') != -1)
pageContextMenu.show(node.ui.getAnchor());
else if(node.id.indexOf('question:') != -1)
questionContextMenu.show(node.ui.getAnchor());
else
applicationContextMenu.show(node.ui.getAnchor());
},
onMove : function(tree, node, oldParent, newParent, index ){
var oldID = oldParent.id.split(":")[1];

TreeAdmin.doUpdate(newParent.id.split(":")[1],((oldID == null)? -1 : oldID),node.id.split(":")[1],node.id.split(":")[0],index, null);
},
startDrag : function (panel, node, e){
var root = panel.getRootNode();
if(node.id.indexOf("question:") != -1){
root.allowChildren = false;
} else if(node.id.indexOf("page:") != -1) {
for(var i =0; i < root.childNodes.length; i++)
root.childNodes[i].allowChildren = false;
}
},
endDrag : function (panel, node, e){
var root = panel.getRootNode();
if(node.id.indexOf("question:") != -1) {
root.allowChildren = true;
} else if(node.id.indexOf("page:") != -1) {
for(var i =0; i < root.childNodes.length; i++)
root.childNodes[i].allowChildren = true;
}
}
};
}();

Ext.EventManager.onDocumentReady(ApplicationTree.init, ApplicationTree, true);


In the CopyfromTree the beforeremove event fires but still removes the item even though I have beforeremove returning false.

froggman2k
2 Apr 2007, 11:58 AM
I am having the same problem here... Has anyone come up with a reason why this doesn't work? Here is how I'm implementing this:

this.panel.region.addListener(
'beforeremove'
, function() {
var composeConfirm = confirm("Closing this window will delete all entered information.\n\nAre you sure you want to close this window?");

if (!composeConfirm) {
return false;
}
}, this
, true
);

Is there something obvious that I'm not seeing here?

Thanks!

jack.slocum
2 Apr 2007, 1:02 PM
For the Tree:

That's a move (2 part action) - not just a remove. You are in fact stopping the remove, but you are not stopping the add/insert. I'm not sure what the results are in this case, probably not what you are trying to do.

For the ContentPanel/Region:


/**
* @event beforeremove
* Fires before a panel is removed (or closed). To cancel the removal
* set "e.cancel = true" on the event argument.
* @param {Ext.LayoutRegion} this
* @param {Ext.ContentPanel} panel The panel
* @param {Object} e The cancel event object
*/

tryanDLS
2 Apr 2007, 1:11 PM
Check the doc for region's beforeremove event. You need to set e.cancel=true, rather than returning false from your handler.

Darstan
3 Apr 2007, 4:30 AM
Since had not heard back on this for a while I went ahead and fixed this myself. Below is what needs to be fixed to rectify this issue.

The problem is that when the move happens there is no clone of the object made since no clone is made the details of the original all change such as the parent tree and so on. This is the cause of the node disappearing. Inorder to fix this you need to create the cloneing ability for the nodes. Not all the settings need to be cloned but a good chunk of them do. You will also need set up clone functions on the properties that are objects. Such as the UI object and any and all events. You then need to set all things that refrence the old tree in the clone to the new tree.

I hope this helps.

Bob

jack.slocum
3 Apr 2007, 10:23 AM
To clone a node you should be able to do:

new Ext.tree.TreeNode(existingNode.attributes);

This doesn't clone children, but that could be done fairly easily using cascade().

Edit: you will need to edit the ID if it is going in the same tree.

tristan
6 Apr 2007, 1:55 PM
I am still having problems with implementation of this. Any chance we could get a simple example or some code snippets to illustrate this functionality? Specifically:

a) Two trees, with drag-n-drop between them
b) Drag from one tree to another simply clones the node and appends to the new tree, leaving the original node intact.

Thanks much!
Tristan

consigliere
19 Jun 2007, 2:14 AM
Hello,

I'm having a similar Problem here:

I've got a Tree, which loads its nodes via XHR. When a User wants to delete a node, I firstly want to try to delete it serverside and if success, delete it in the GUI:

ButtonHandler:
[code]
handler: function() {
var n = JL.Module.Mam.getLabelTree().getSelectionModel().getSelectedNode();
if(! n || n.id == JL.Module.Mam.LABEL_TREE_ROOT_ID)
{
Ext.MessageBox.alert('Kein Label gew