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）應該出現在該文件夾的名稱上方。