extjs - Ext.js 可编辑树节点

Question

是否可以让用户编辑树节点(即文件夹)？我看到在 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 来限制版本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)就会出现在文件夹名称的上方。