2014-09-29 8 views
0

I 초기로드시 일부 루트 레벨 노드를 설정하는 트리 패널이 있습니다. 그런 다음 노드가 열리면 하위 노드를 추가하는 javascript 함수가 있습니다.appendChild 트리 노드가 확장되지 않습니다.

노드를 확장 할 수 없다는 문제가 있습니다. 노드를 확장하는 화살표는 표시하지 않습니다.

var onbeforeitemexpand = function(node, options) { 
    if (!node.hasChildNodes()) { 
     node.appendChild({ 
      title:'Should not be expandable', 
      checked: false, 
      leaf:true 
     }); 
     node.appendChild({ 
      title:'Should expand', 
      checked: false, 
      leaf:false, 
      expandable:true 
     }); 

}; 

tree.on('beforeitemexpand', onbeforeitemexpand, null); 

그러나 두 번째 아이가 확장되지 않습니다 : 내가 자식 노드를 추가하는 방법은 다음과

입니다.

 node.appendChild({ 
      title:'Should expand', 
      checked: false, 
      leaf:false, 
      expandable:true, 
      children:[{}] 
     }); 

을하지만 그 아래 빈 노드가있을 것입니다 내가이 노드 아래에 아이를 추가하려고 할 때이 확장 때 : 나는 그것을 확장으로 얻을 수있는 유일한 방법은 이런 식으로 빈 아이를 추가하는 것입니다 자식 노드는 빈 노드 내부로 들어갑니다.

내 자신의 자바 스크립트 함수를 통해 (아약스 요청을 통해 ..) 트리의 "지연로드"를 수행하는 더 좋은 방법이 있습니까?

답변

1

아무리 노력해도 함수를 통해 트리에 노드를 추가 할 때 노드에 화살표를 표시 할 수 없습니다. 나는 위의 솔루션 및 사용자 정의 프록시 리더를 시도 .. 드디어이 함께 해결 :

 Ext.define('Ext.proxy.DocumentNodes', { 
      extend: 'Ext.data.proxy.Memory', 
      alias: 'proxy.documentnodes', 
      read: function(operation, callback, scope) { 
       var parent=operation.node; 
       var children=[]; 
       children.push(
        Ext.create('Document',{ 
         title:'Some document', 
         iconCls:'task-folder', 
         checked: false, 
         leaf: false, 
         expandable: true, 
         children: [{tempitem: true}] 
        }) 
       ); 
       var result=Ext.create("Ext.data.ResultSet",{records: children}); 
       Ext.apply(operation, {resultSet: result}); 
       operation.setCompleted(); 
       operation.setSuccessful(); 
       Ext.callback(callback, scope || this, [operation]); 
      } 
     }); 

     Ext.define('Document', { 
      extend: 'Ext.data.Model', 
      fields: [ 
       {name: 'title', type: 'string'}, 
      ] 
     }); 

     var store = Ext.create('Ext.data.TreeStore', { 
      model: 'Document', 
      proxy: { 
       type: 'documentnodes' 
      }, 
      nextId: 1, 
      folderSort: false 
     }); 

그런 다음 트리 패널이 저장소를 사용하고 같은 트리에 대한이 onbeforeitemexpand 청취자 :

 var onbeforeitemexpand = function(node, options) { 
      var firstChild = node.getChildAt(0); 
      if (firstChild.get('tempitem')) { 
       node.removeChild(firstChild, true); 
      } 
      node.store.load({ node: node }); 
     }; 

     tree.on('checkchange', oncheckchange, null); 
     tree.on('beforeitemexpand', onbeforeitemexpand, null); 

무엇 이 모든 것은 처음에는 프록시 리더가 노드를 만들고 그 아래에 빈 노드를 추가하므로 노드 앞에> 화살표가 나타납니다. 그런 다음 beforeitemexpand에서 첫 번째 노드가 임시 노드인지 확인하고 제거한 다음 노드의 새로 고침을 호출하여 프록시 판독기를 실행하여 열린 노드 아래에 새 노드를 추가하고 그 아래에 임시 노드를 추가합니다.

이 작업을 수행하는 데 아주 어리석은 방법처럼 보입니다. 그러나 노드가 노드가 자식이 없지만 리프가 설정된 경우 노드 앞에 표시되는 화살표를 얻을 수있는 방법을 모르겠습니다. to false 및 expandable은 true로 설정됩니다.

어쩌면 누군가가 이것에 대해 더 좋은 대답을했을 것입니다.

관련 문제