TreePanel with editable nodes

[psypaul]

Hi,

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

[sven]

This is not implemented, but you can use the Editor class to add support for this easily.

[psypaul]

Hi,

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.setFieldLabel(EguideMessages.INSTANCE.nodeName());
nodeName.setValue((String) modelData.get(Selector.name.name()));
Editor editor = new Editor(nodeName);
editor.show();

[maloof]

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.

[sven]

This forum is about GXT and so this wont help much here ;)

[maloof]

oops sorry!

[psypaul]

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?

[psypaul]

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)

@SuppressWarnings("rawtypes")
@Override
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.setAutoHeight(true);
editor.setAutoWidth(true);
editor.setCompleteOnEnter(true);
editor.startEdit(target.getElement(), target.getModel().get(Selector.name.name()));
}

[psypaul]

I added the following listener to change the actual node:
(Perhaps there's a better way?)


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

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

[sven]

Looks good for a starting. I would not use autoWidth and autoHeight, but correctly size it.

[Konrad Lindner]

Hi,

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?

Best
Konrad

[psypaul]

Look at the bottom of page 1 of this thread to see how I did this.