CODEWITHSUNDEEP
extjstreetreenodetreepanel
frbry
frbry

Reputation: 499

Ext.js Editable TreeNodes

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?

Upvotes: 3

Views: 5270

Answers (1)

Mariano Desanze
Mariano Desanze

Reputation: 8153

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.

Upvotes: 5

Related Questions