TreePanel repeats itself?

[badgerd]

Hi there, I have this in my code -


var Tree = Ext.tree;

var navTree = new Tree.TreePanel('el_EmailFolder', {
animate:true,
rootVisible: false,
lines:false,
loader: new Tree.TreeLoader({dataUrl:'resources/retrieveEmailFolders.cfm'}),
enableDD:true,
containerScroll: true
});

// add an inline editor for the nodes
var ge = new Ext.tree.TreeEditor(navTree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: '',
draggable:false,
id:'source'
});
navTree.setRootNode(root);

navTree.render();
root.expand();

And my example JSON call is this -


[{"text":"[email protected]","id":"emailFolder","cls":"folder"},
{"text":"Inbox","id":"id1","leaf":true,"cls":"file"},
{"text":"Outbox","id":"id2","leaf":true,"cls":"file"}]

When I "expand" the emailFolder node - it appears that the JSON information is repeating itself hundreds of times?

Like this -


Email Folder 1
Email Folder 1
Email Folder 1
Email Folder 1
Inbox
Outbox
Inbox
Outbox
Inbox
Outbox
Inbox
Outbox
Email Folder 2

What would be causing this problem?

Also, if I wanted to make the folders appears as example below; how could I achieve this -


Email Folder 1
Inbox
Outbox
Email Folder 2
Inbox
Outbox

And lastly, How could I make the Email Folder names non-editable, but allow the actual Inbox/Outbox folders to be editable?

[badgerd]

I have managed to solve most of my issues.

The only issue I have now are:

1) How can I make the Folder non-editable but allowing the children nodes to be editable?
2) How could I make the first folder node "expanded"?

[PFM]

badgerd,

For #1, I use a custom property for each node called allowEdit with a value of true/false. you would access allowEdit using node.attributes.allowEdit. The JSON would look like



{"text":"Inbox","id":"id1","leaf":true,"cls":"file",allowEdit:false}

Then on the beforestartedit event of the treeEditor you can do the following to cancel editing,



if (!this.editNode.attributes.allowEdit) {
return false;
}


For #2, add expanded:true to the JSON to have the node expanded when loaded

[badgerd]

PFM,

Thanks for your reply, I have tried as you suggested, but am getting a JS error saying "this.editNode.attributes is null or not an object".

Have I done this correctly?

JS file -


var Tree = Ext.tree;

var navTree = new Tree.TreePanel('el_EmailFolder', {
animate:true,
rootVisible: false,
lines:false,
loader: new Tree.TreeLoader({dataUrl:'resources/retrieveEmailFolders.cfm'}),
enableDD:true,
containerScroll: true
});

// add an inline editor for the nodes
var treeEditor = new Ext.tree.TreeEditor(navTree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});

treeEditor.on("beforestartedit",
function(o,target,text){
// validate some stuff to make sure the correct node was chosen
// some tree nodes aren't changeable
if (!this.editNode.attributes.allowEdit) {
return false;
}

}, this, true
);

treeEditor.on("complete",
function(o,newText,oldText){
// it can be changed so make the changes and send to database


}, this, true
);

// set the root node
var root = new Tree.AsyncTreeNode({
text: '',
draggable:false,
id:'source'
});
navTree.setRootNode(root);

navTree.render();

Also, How could I pass the ID parameter of the node that is changed into the "complete" script?

Hope this makes sense to easily digest :)

[eli.lindner]

Hi,

How did you prevent multiple tree's from loading?

Thanks,

[evant]

var Tree = Ext.tree;

var navTree = new Tree.TreePanel('el_EmailFolder', {
animate:true,
rootVisible: false,
lines:false,
loader: new Tree.TreeLoader({dataUrl:'resources/retrieveEmailFolders.cfm'}),
enableDD:true,
containerScroll: true
});

// add an inline editor for the nodes
var treeEditor = new Ext.tree.TreeEditor(navTree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});

treeEditor.on("beforestartedit",
function(ed,target,text){
// validate some stuff to make sure the correct node was chosen
// some tree nodes aren't changeable
if (!ed.editNode.attributes.allowEdit) {
return false;
}

}, this, true
);

treeEditor.on("complete",
function(o,newText,oldText){
// it can be changed so make the changes and send to database


}, this, true
);

// set the root node
var root = new Tree.AsyncTreeNode({
text: '',
draggable:false,
id:'source'
});
navTree.setRootNode(root);

navTree.render();

[badgerd]

I had done the JSON call incorrectly.

The correct way to allow children under parent is -



[{"text":"#FromEmail#",
"id":"emailFolder",
"cls":"folder",
"children": [{
"text":"Inbox",
"id":"Inbox",
"leaf":true,
"cls":"folder",
"href":"javascript:loadEmails(#EmailAddressId#);"
},{
"text":"Outbox",
"id":"Outbox",
"leaf":true,
"cls":"folder",
"href":"javascript:loadSentEmails(#EmailAddressId#);"
}]
}]

[eli.lindner]

Great, thanks a lot.

[badgerd]

evant, that fixed my issue.

Thanks!!

[PFM]

sorry, try


myTreeEditor.on('beforestartedit', function(editor, boundEl, value) {
if (!editor.editNode....
}

Opps... just saw the above posts with the correction... thanks

[badgerd]

badgerd,

For #1, I use a custom property for each node called allowEdit with a value of true/false.
you would access allowEdit using node.attributes.allowEdit. The JSON would look like



{"text":"Inbox","id":"id1","leaf":true,"cls":"file",allowEdit:false}

Then on the beforestartedit event of the treeEditor you can do the following to cancel editing,



if (!this.editNode.attributes.allowEdit) {
return false;
}


For #2, add expanded:true to the JSON to have the node expanded when loaded

In relation to #2 - this does not work the way I need it.

If for example I have the following tree structure -

Folder 1
----- Inbox 1
----- Outbox 1
Folder 2
----- Inbox 2
----- Outbox 2

How could I only show that Folder 1 is open/expanded, but all other folders are closed on default?

[PFM]

So you want it to look like the following?

- Folder 1
----- Inbox 1
----- Outbox 1
+ Folder 2

if so,



{"text":"Folder 1","id":"emailFolder1","cls":"folder",expanded:true},
{"text":"Folder 2","id":"emailFolder2","cls":"folder",expanded:false}

Sorry, if I am misunderstanding your question.

[badgerd]

perfect, thanks :) I simply do not see simple things like that at times!

[PFM]

np.. glad it helped :)

[alexandern]

For those reading this,

If you use the property "editable", the TreeEditor will honor it and it wont let you edit the node.

Now, If I could only configure the damn thing to stop using clicking for editing and use "F2" instead.. what a PITA!


In relation to #2 - this does not work the way I need it.

If for example I have the following tree structure -

Folder 1
----- Inbox 1
----- Outbox 1
Folder 2
----- Inbox 2
----- Outbox 2

How could I only show that Folder 1 is open/expanded, but all other folders are closed on default?