Ext.js 可编辑树节点

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属性（是的，就是您提到的那个）或使用TreeEditor 的beforestartedit事件来限制版本：

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

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

只需选择一个文件夹，然后再次单击该文件夹，编辑器（数字字段）就会出现在文件夹名称上方。