extjs - 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 示例制作的实时示例，不同之处在于您可以在我的示例中编辑文件夹节点。

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