Ext.js可编辑TreeNodes

Question

是否可以使TreeNodes（即文件夹）由用户编辑？我发现在TreeNode类中有一个名为editable的选项，但我无法使用它或找到任何有关其用法的示例。

我的另一个任务是在节点中放置一个输入框，以便用户可以为每个项目输入数字。我该怎么做？

Answer 1

添加new Ext.tree.TreeEditor(yourTree);将足以使树可编辑。

但是你可以通过使用其他2个contructors参数定义更多：

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

在那里，我使用了NumberField这样你就可以在那里只输入数字。

你可以，或者通过使用beforestartedit事件TreeEditor的利用每一个树节点的editable财产（是的，一个你所提到的）限制版：

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

在jsbin.com/ExtJS-TreeEditor/2你有一个基于Sencha's Checkbox TreePanel example的实例，不同的是你可以编辑我的例子中的文件夹节点。

只需选择一个文件夹，然后再次单击该文件夹，编辑器（一个NumberField）应该出现在该文件夹的名称上方。