View Full Version : TreePanel with editable nodes

12 Jan 2011, 12:09 AM

I would like to be able to rename the nodes of my TreePanel with an editor similar to the EditorTreeGrid's editors.
Is that possible or must I use normal dialog popups instead?

Thank you

12 Jan 2011, 12:05 PM
This is not implemented, but you can use the Editor class to add support for this easily.

12 Jan 2011, 11:32 PM

thanks for the tip.
I'm trying to get it working, but I'm struggling.
Can you please point me in the right direction?

My code looks like this so far:

final ModelData modelData = tree.getSelectionModel().getSelectedItem();
final TextField<String> nodeName = new TextField<String>();
nodeName.setValue((String) modelData.get(Selector.name.name()));
Editor editor = new Editor(nodeName);

13 Jan 2011, 12:50 PM
var mytree = new Ext.tree.TreePanel({....});
var mytree_editor = new Ext.tree.TreeEditor(mytree, {...});

now when you doubleclick a node, an editor should appear. check http://dev.sencha.com/deploy/dev/docs/?class=Ext.tree.TreeEditor for tree editor config.

13 Jan 2011, 3:14 PM
This forum is about GXT and so this wont help much here ;)

13 Jan 2011, 4:08 PM
oops sorry!

17 Jan 2011, 12:17 AM
I'm still struggling with this.
I had a look at TreeEditorGrid for some help. Seems like it makes use of class called EditorSupport which has grid-related properties.
So I'm not sure if I should use that.

Also, the Editor class needs to be instantiated with a field. How do I get the currently selected node of the treePanel set to this field?

17 Jan 2011, 1:00 AM
Ok, I got the editor to display.
Now I just have to figure out how to save the value to the model? Any ideas.
Here's the code so far: (I've overridden TreePanel's onDoubleClick method)

protected void onDoubleClick(TreePanelEvent tpe) {
final TreePanel<ModelData>.TreeNode target = tree.findNode(tpe.getTarget());
TextField<String> nodeName = new TextField<String>();
Editor editor = new Editor(nodeName);
editor.startEdit(target.getElement(), target.getModel().get(Selector.name.name()));

17 Jan 2011, 2:05 AM
I added the following listener to change the actual node:
(Perhaps there's a better way?)

editor.addListener(Events.Complete, new Listener<BaseEvent>() {

public void handleEvent(BaseEvent be) {
Record record = tree.getStore().getRecord(target.getModel());
record.set(Selector.name.name(), nodeName.getValue());

17 Jan 2011, 1:02 PM
Looks good for a starting. I would not use autoWidth and autoHeight, but correctly size it.

Konrad Lindner
31 Jan 2011, 7:21 AM

I am also facing the same problem: would like to create a tree, where I can edit the nodes (similar to the Row Editor Tree Grid). Did you find at the end a solution for your problem? Could you maybe give some Ideas about the correct solutions?


31 Jan 2011, 7:26 AM
Look at the bottom of page 1 of this thread to see how I did this.