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을 사용했다.

그리고 당신은, 또는 beforestartedit의 이벤트 TreeEditor의 사용하여 (예, 하나는 당신이 언급 한) 모든의 TreeNode의 editable 특성를 사용하여 버전을 제한 할 수 있습니다 jsbin.com/ExtJS-TreeEditor/2에서

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

을Sencha's Checkbox TreePanel example을 기반으로 만든 라이브 예제가 있습니다. 차이점은 내 예제에서 폴더 노드를 편집 할 수 있다는 것입니다.

폴더를 선택한 다음 해당 폴더를 다시 클릭하기 만하면 편집기 (NumberField)가 폴더 이름 위에 나타납니다.