Ext.js編集可能なツリーノード

Question

ユーザがツリーノード（フォルダ）を編集できるようにすることはできますか？ 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を使用しました。

そして、あなたは、すべてのTreeNode（はい、あなたが言及したもの）のeditableプロパティを使用することによって、またはTreeEditorのbeforestarteditイベント使用して編集を制限することができます。jsbin.com/ExtJS-TreeEditor/2で

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

をSencha's Checkbox TreePanel exampleに基づいて作成したライブの例がありますが、私の例ではフォルダノードを編集することができます。

フォルダを選択してもう一度クリックすると、フォルダ名の上にエディタ（NumberField）が表示されます。