[Solved] Renaming Tree Nodes

[badgerd]

I have a tree with a renameFolder function -



// rename email folder function
function renameFolder(){
Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);
navTree.selModel.selNode.ownerTree.fireEvent('beforechildrenrendered', navTree.parentNode);
}
});
}


How could I loop through the entire tree's nodes to ensure I do not get a duplicate name and throw an alert if I find a duplicate?

example scenario:

I have the following folders -

Folder 1
Folder 2

I want to rename Folder 2 to Folder 1 -

Folder 1 already exists, so how could I stop Folder 2 being renamed to Folder 1 and make this throw an error to the user.

[evant]

Keep in mind if you're using an asynchronous tree you would have to load all the nodes before you do this check.

This will probably do what you want: http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#cascade

[badgerd]

evant, yes I am using an AsyncTreeNode tree.

I do not think cascase will be the right one to use as I need to check all the tree nodes and then throw an error not just anything under the node I am renaming?

Correct me if I am wrong?

Would you have an example you could show me?

[evant]

Cascade implies all the way down, not just immediate children, so you'd do something like:



var name = 'whatever';
root.cascade(myFunc, this);

function myFunc(node)
{
if (node.text == name);
return false;
}


Above is untested, but you get the idea.

[badgerd]

OK I have changed the code so it is as follows:



// rename email folder function
function renameFolder(){
Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);

var name = text;
navTree.root.cascade(myFunc, this);

function myFunc(node)
{
if (node.text == name) {
return false;
} else {
navTree.selModel.selNode.ownerTree.fireEvent('beforechildrenrendered', navTree.parentNode);
}
}
}
});
}


The loop works, but it does not stop once it finds a folder of the same name, it continues to rename and save.

Any suggestions?

[evant]

Check that the name value is being correctly used?

[badgerd]

Yes it is correct, I checked by using alerts for both "node.text" and "name" variables.

[evant]

Seems it doesn't stop straight away: http://extjs.com/forum/showthread.php?t=5487&highlight=cascade

Guess you could do something lame like:



// rename email folder function
function renameFolder(){
Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);

var name = text;
var err = false;
navTree.root.cascade(myFunc, this);

function myFunc(node)
{
if (!err)
{
if (node.text == name) {
err = true;
} else {
navTree.selModel.selNode.ownerTree.fireEvent('beforechildrenrendered', navTree.parentNode);
}
}
}
}
});
}

[badgerd]

I tried your suggestion, it still doesn't want to work :(

[evant]

What do you mean it doesn't work? Trace through the code in firebug.

[badgerd]

OK I have traced it in FireBug, Firebug says "myFunc is not defined".

Code -



// rename email folder function
function renameFolder(){
Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);

// we need to ensure the new folder name is not already used
var name = text;
var err = false;
navTree.root.cascade(myFunc, this);

function myFunc(node)
{
if (!err)
{
if (node.text == name) {
err = true;
} else {
navTree.selModel.selNode.ownerTree.fireEvent('beforechildrenrendered', navTree.parentNode);
}
}
}
}

});
}



IE doesn't display any error.

[PFM]

For IE check Tools|Internet Options... and check "Display a notification about every script error"

[badgerd]

For IE check Tools|Internet Options... and check "Display a notification about every script error"

I have the option checked...

I'm just wondering why the myFunc function does not work, have I done it wrong?

[PFM]

Just a suggestion, try something like this to get the cascading working...

function renameFolder(){
Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);
navTree.root.cascade(myFunc, this);
}
});

function myFunc(node) {
console.log("node.text = " + node.text);
}

[Edit] Sorry forgot to wrap the code with CODE statements

[badgerd]

OK I now have the above code in place -

I do know that the cascade is working, as all options came up in debug console.

How can I pass the text variable into the myFunc function so it is set to 'strName' variable? Hope this makes sense!



function renameFolder(){

Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.selModel.selNode.setText(text);
navTree.root.cascade(myFunc, this);

if (err == true) {
alert('it already exists');
}

}
})};

function myFunc(node, strName) {
if (node.text == strName) {
err = true;
}
}

[PFM]

The 3rd argument for cascade will be passed as the second argument to your function


navTree.root.cascade(myFunc, this, text);

After a match, you can return false to stop the cascading


if (node.text == strName) {
err = true;
return false;
}

[badgerd]

I am always returning the variable 'err' as true even though the tree does not have the folder value I am renaming to? Am I missing something?



function renameFolder(){

Ext.MessageBox.prompt('Rename', '', function(btn, text){
if (btn == 'ok'){
var a = navTree.selModel.selNode;
navTree.root.cascade(myFunc, this, text);

if (err == true) { // Don't do anything, it already exists
alert(text);
alert('it already exists');
} else { // It does not exist in tree already, so lets rename the folder
err = false;
navTree.selModel.selNode.setText(text);
navTree.selModel.selNode.navTree.fireEvent('beforechildrenrendered', navTree.parentNode);
}
}

})};

function myFunc(node, strName) {
if (node.text == strName) {
err = true;
return false;
}
}

[evant]

Where is err being declared?

[badgerd]

Its being declared at the top of the document and is set to false.

[badgerd]

This is now getting critical. I cannot seem to recitify the problem.

Anyone have any suggestions?

sorry for the bump :s

[tryanDLS]

Use firebug to look at the scope of your variables. You have what appear to be a couple of global functions that are accessing some variable called err that you think is in scope - is it?

[badgerd]

Yes the err variable is being declared, and is only used for this function only. It is set to false as default.

Should I be declaring it within the function?

[evant]

The scope you're passing to cascade is 'this', which in that case would refer to the renameFolder function I believe, so that would mean err is not in scope. Try declaring err inside your renameFolder function.

[tryanDLS]

Yes the err variable is being declared, and is only used for this function only. It is set to false as default.

Should I be declaring it within the function?
That question makes me think you don't really understand the scope of variables in javascript. Have you read the sticky thread at top of this forum regarding scope?