Ext.js Editable TreeNodes

Question

Is is possible to make TreeNodes (i.e. folders) editable by the user? I see that there's an option called editable in TreeNode class but I couldn't get it working or find any examples on its usage.

My other quest is to place an input box in nodes so, user can enter numbers for each item. How can I do it?

score 5 · Accepted Answer · answered Dec 21 '10 at 02:31

Adding new Ext.tree.TreeEditor(yourTree); will be enough to make the tree editable.

But you can define much more by using the other 2 contructors parameters:

var te = new Ext.tree.TreeEditor(tree, new Ext.form.NumberField({
    allowBlank: false,
    blankText: 'A number is required'
}), {
    editDelay: 100,
    revertInvalid: false
});

te.on("complete", function(node) {
    alert(node.startValue + ' -> ' + node.editNode.text);
});

There I used a NumberField so you can enter only numbers in there.

And you can restrict edition by using the editable property of every TreeNode (yes, the one you mentioned), or by using the beforestartedit event of the TreeEditor:

te.on('beforestartedit', function(ed, boundEl, value) {
    if (ed.editNode.leaf)
      return false;
});

At jsbin.com/ExtJS-TreeEditor/2 you have a live example I made based on Sencha's Checkbox TreePanel example, the diference is that you can edit the folder nodes on my example.

Just select a folder and then click again on that folder, the editor (a NumberField) should appear above the folder's name.

Ext.js Editable TreeNodes

1 Answers1