TreeLoader : 자식 노드에 대한 ajax 요청을 실행하지 않습니까?

Question

그래,이 사이트는 내가 플레이 프레임 워크에 함께 넣고 있습니다. 기본적으로 백엔드의 FTP 사이트에 연결하여 폴더/파일 목록을 검색하고 기본 ExtJS 프런트 엔드로 JSON으로 보냅니다.

트리 패널이 올바르게 채워지도록 노력하고 있지만 리프가 아닌 노드를 확장 할 때 특별한 작업을 수행하지 않는 것 같습니다.

내가 읽은 것을 바탕으로 데이터 URL을 사용해야하고 노드 매개 변수를 해당 데이터 URL에 전달하여 노드 노드에 대한 데이터를 가져 오지만 방화 광에서는 그렇지 않습니다. 해당 데이터에 대해 전송 된 요청을 확인하십시오.

노드가 확장되었을 때 자식 노드가 동적으로 노드를 가져올 수 있도록 AJAX 호출을 허용하려면 어떻게해야합니까? 여기

참조에 대한 관련 코드 :

ID가 JSON으로 반환

Ext.onReady(function() { 



    new Ext.Viewport({ 
     layout: 'border', 
     defaults: { 
     height: 100, 
     width: 250, 
     collapseMode: 'mini' 
     }, 
     items : [ 
      { 
       region: 'center', 
       margins: '5 5 0 0', 
       contentEl: 'center-content' 
      }, 
      { 
       id: 'file-tree', 
       region: 'west', 
       title: 'Files', 
       split: true, 
       collapsible: true, 
       xtype: 'treepanel', 
       autoScroll: true, 
       loader: new Ext.tree.TreeLoader({ 
        dataUrl: 'http://localhost:9000/application/listFiles', 


       }), 

       root: new Ext.tree.AsyncTreeNode({ 
        expand: true, 
        text: "/", 
        id: "/" 
       }), 
       rootVisibile: true, 
       listeners: { 
        click: function(n) { 
         Ext.Msg.alert('File Tree Click', 'You clicked: ' + n.attributes.id); 
        } 
       } 
      } 
     ] 
    }); 
}); 

내가 확장하려는 하위 디렉토리의 전체 경로이고, LISTFILES 조치는 매개 변수를 사용하고 적절한를 반환합니다 파일. 마지막 항목은 내가 동적으로 아이들을로드 찾고 폴더의 예입니다

[ 
     { 
      id: "/./", 
      text: "./", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/../", 
      text: "../", 
      leaf: false, 
      children: [ ] 
     }, 
     { 
      id: "/.ftpquota", 
      text: ".ftpquota", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/.htaccess", 
      text: ".htaccess", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/022610.html", 
      text: "022610.html", 
      leaf: true, 
      children: [ ] 
     }, 
     { 
      id: "/Gail/", 
      text: "Gail/", 
      leaf: false, 
      children: [ ] 
     } 
] 

그건 : 요청으로

, 여기에 JSON 출력의 조각입니다.

Answer 1

JSON에 자식이 없으므로 리프가 아닌 트리 노트를 채우지 않습니다.

결과를 얻으려는 하위 폴더에 대한 추가 매개 변수 (ID)를 전달하여 루트 노드를 다시로드하십시오.

AsyncTreeNode의 클릭 이벤트 또는 확장 이벤트에서 루트를 다시로드해야합니다. reload 메소드에 트리를 다시로드하려는 ID 하위 폴더 (clickedVal)를 제공하십시오.

myTreePanel.loader = new Ext.tree.TreeLoader({ 
    dataUrl: 'http://localhost:9000/application/listFiles', 
    requestMethod: 'POST', 
    listeners: { 
     beforeload: function() { 
     this.baseParams.subFolderID = clickedVal; 
      } 
    } 
}); 
myTreePanel.root.reload({baseParams: {subFolderID: clickedVal}); 

Addtional Notes :이 방법을 사용하여 트리를 다시 이동하려면 일부 탐색 컨트롤을 빌드해야합니다.

Answer 2

이전 포스터에서 언급했듯이 반환 된 JSON은 서술 된대로 자식을 반환하지 않습니다 (명백한 계층 구조/참조가 없음). 무슨 일이 일어나고 있는지 설명하기 위해, 간단한 treepanel 예제를 통해 나를 데려다 줄 수 있습니다.

첫 번째 것 - ExtJS 구성 요소 인 treepanel 자체. 가장 간단한 수준에서, 당신이, 따라서 해제를 설정할 수 있습니다 :이 코드를 통해 당신을 복용

MYtreepanel=new Ext.tree.TreePanel({ 
     dataUrl: 'sourceofnodestructure.php', 
     root: { 
      nodeType: 'async', 
      id:'root-node' 
      } 
     } 
    }); 

, 어떤이가하는 것은 가장 기본적인 수준에서 treepanel 구성 요소를 만드는 것입니다 (당신은, 형식의 레이아웃에 관한 추가 설정을 추가해야합니다 , etc. etc- 원래 게시물의 코드대로 설정에 맞춰 짐) 작업에 필요한 최소 설정 만 추가하십시오.

루트 노드는 비동기로 설정됩니다 (즉, 클릭하면 외부 소스에서 자식을 동적으로로드 함). id 값은 'root-node'(또는 원하는대로)입니다. 이드는 중요합니다. 비동기 treepanels의 작동을 이해할 때 노드가 확장되면 기본적으로 POST 요청이 패널 loader/dataurl (이 경우 'sourceofnodestructure.php ')이 id는'node '라는 변수에 전달됩니다. 서버 측 스크립트는이를 읽어야합니다 (즉, $ _REQUEST [ 'node']를 사용하여 PHP에서). 그리고 클릭 된 노드에 대한 자식을 나타내는 각각의 JSON을 제공해야합니다.

즉 (다시, PHP에서) 임의의 treepanel

switch($_REQUEST['node']){ 
case "root-node": 
// output JSON for child nodes under the root node 
break; 
case "child node 1": 
// output JSON for child nodes under the first child node under the root 
break; 
} 
etc etc... 

번째 부분은 노드 구조이다. 위 예제에서, 이것은 서버 측 스크립트 인 sourceofnodestructure.php에 의해 제공됩니다. PHP는 내 자신의 처리 규칙을 적용하고 더 유연한 방식으로 노드에 추가 속성을 할당 할 수 있으므로 노드를 제공하는 방식으로 선호됩니다. PHP를 사용하고 있는지 여부 ('http://localhost:9000/application/listFiles')를 잘 모르겠으므로 자세히 설명하지는 않겠지 만 스크립트가 클릭 된 노드를 식별하고 클릭 한 노드의 ID를 기억하는지 확인해야합니다 POST 변수 'node'에있는 스크립트로 전송되면,이를 적절히 트랩하여 출력하는 것이 필요합니다.

PHP가이 문제를 처리하는 데 사용할 수있는 예제를 알려주십시오.