Ext.js Bearbeitbare TreeNodes

Question

Ist es möglich, TreeNodes (d. H. Ordner) vom Benutzer editierbar zu machen? Ich sehe, dass es eine Option gibt, die in der TreeNode-Klasse bearbeitbar ist, aber ich konnte es nicht funktionieren lassen oder Beispiele für ihre Verwendung finden.

Meine andere Aufgabe ist es, ein Eingabefeld in Knoten zu platzieren, so dass Benutzer Zahlen für jedes Element eingeben können. Wie kann ich es tun?

Answer 1

Das Hinzufügen von new Ext.tree.TreeEditor(yourTree); reicht aus, um den Baum editierbar zu machen.

Aber Sie können mit den anderen 2 contructors Parameter viel mehr definieren:

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); 
}); 

Es habe ich eine Number, so dass Sie nur Zahlen dort eingeben.

Und Sie können mit Hilfe der editable Eigenschaft jedes TreeNode (ja, die, die Sie erwähnt), oder mit dem beforestartedit Ereignis der TreeEditor Ausgabe einschränken:

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

Bei jsbin.com/ExtJS-TreeEditor/2 Sie haben ein Live-Beispiel basierend auf Sencha's Checkbox TreePanel example gemacht, der Unterschied ist, dass Sie die Ordner Knoten in meinem Beispiel bearbeiten können.

Wählen Sie einfach einen Ordner und klicken Sie erneut auf diesen Ordner, der Editor (a NumberField) sollte über dem Namen des Ordners erscheinen.