Ext.js可编辑的TreeNodes

Question

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

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

Answer 1

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

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

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，因此您只能输入数字。

您可以使用每个TreeNode的 editable属性来限制版本（是的，您提到的那个），或者使用 beforestartedit事件< / strong> of TreeEditor：

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

在 jsbin.com/ExtJS-TreeEditor/2 ，您有一个基于Sencha's Checkbox TreePanel example制作的实际示例，不同之处在于您可以编辑我示例中的文件夹节点。

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