ExtJS5 TreeStore에서 JSON을 TreePanel로로드

Question

답변과 테스트를 많이 했었지만 주 뷰에서 TreePanel을 가져 와서 JSON 트리 데이터를 표시 할 수 없습니다. 나는 누군가가 내가 잘못하고 있거나 올바르게 활용하지 못하는 것을 불러 줄 수 있기를 바라고있다.

Tree.json

{ 
"message": "SUCCESS", 
"details": { 
    "text": "Categories", 
    "expanded": "true", 
    "leaf": "false", 
    "children": [ 
     { 
      "text": "Child 1", 
      "leaf": "true" 
     }, 
     { 
      "text": "Child 2", 
      "leaf": "true" 
     }, 
     { 
      "text": "Child 3", 
      "expanded": "true", 
      "leaf": "false", 
      "children": [ 
       { 
        "text": "Grandchild", 
        "leaf": "true" 
       } 
      ] 
     } 
    ] 
} 
} 

Model.js

Ext.define('MyApp.model.Model',{ 
extend: 'Ext.data.TreeModel', 

requires: ['Ext.data.Field'], 

fields:['text'] 

}); 

Models.js

Ext.define('MyApp.store.Models',{ 
extend: 'Ext.data.TreeStore', 
alias: 'store.models', 
model: 'MyApp.model.Model', 

autoLoad: true, 

proxy: { 
    type: 'ajax', 
    url: 'data/Tree.json', 
    reader: { 
     type: 'json', 
     rootProperty: 'details' 
    } 
}); 

View.js (발췌문)

: 여기

내 코드입니다

xtype: 'treepanel', 
     maxWidth: 300, 
     minWidth: 150, 
     store: { 
      type: 'models', 
     }, 
     rootVisible: false 

제 생각에는 빈 나무가 보입니다. rootProperty를 '세부 정보'로 설정하면 Chrome의 개발자 도구 및 방화범 네트워크 탭에서 내 json의 무한 요청을 표시하지만보기에로드되지 않습니다.

올바른 방향으로 나를 가리키게하는 것이 무엇이든 매우 도움이 될 것입니다! 문법이 모두 옳은 것처럼 보이기 때문에 내가 잘못하고있는 것을 생각할 수 없다. 그래서 막 다른 골목을 쳤다.

감사합니다.

편집 : 내보기에서 인라인으로 상점을 만들지 만 별도의 store.js 파일에서 스토어를 만들 때 json 데이터를로드 할 수있었습니다. 나는 또한과 같이 가게 초기화를 변경 :

store: Ext.create('Ext.data.TreeStore',{ 
      fields:['name', 'description'], 
      proxy: { 
       type: 'ajax', 
       url: 'data/Categories.json', 
       reader: { 
        type: 'json', 
        rootProperty: 'children' 
       } 
      }, 
} 

또한 "아이들"을 "세부 사항"에서 내 JSON의 필드를 변경하고 표시 할 수 있었다. 이것은 나중에 내 요구 사항과 일치하지 않을 가능성이 있지만 지금 당장 얻을 수있는 것 (내가 원하는 것과 인라인 저장소 생성과 다른 JSON 형식)을 취할 것입니다.

더 많은 도움이 될만한 정보를 보내 주시면 감사하겠습니다.

Answer 1

TreeStore의 자동로드를 사용하지 않아서이 문제를 피할 수있었습니다.

내 요구 사항에 따라 특정 형식을 갖는 JSON이 필요했기 때문에 노드의 모든 하위 속성이 동일한 이름을 갖기 때문에 프록시를 사용하여 TreeStore를 그대로 사용할 수 없었습니다.

대신 내 가게에 autoLoad: false을 사용하고 내 기본보기에 afterrender을 추가했습니다. 이 afterrender 함수는 이벤트를 발생시키고 JSON 응답에 대한 Ajax GET 요청을 수행합니다. 여기에서 JSON 응답을 처리하고 트리 데이터를 추출한 다음 데이터를 내 TreeStore에로드합니다. 이런 식으로, 나는 나의 JSStore의 포맷팅 (그리고 한 번의 요청으로 더 많은 정보를 보낼 수있는 능력)에 유연성을 가질 수 있으며, 동시에 TreeStore에 필요한 것을 액세스 할 수있다.

여기에 데이터를 저장로드 내가 쓴 기능입니다 (I 주위에 내 JSON의 형식을 변경 있습니다,하지만 기초는 여전히 여기에있다) :

buildTreePanel: function(panel) 
{ 
    var tree = Ext.getCmp('leftPanel'); 
    console.log("Building tree panel"); 
    Ext.Ajax.request({ 
     url: 'data/reports.json', //or server call 
     method: 'GET', 
     disableCaching: false, 
     headers: { 
      'Content-Type': 'application/json' 
     }, 
     //params: PARAMETERS 
     success: function(response, options){ 
      var data = Ext.JSON.decode(response.responseText); 
      var treeData = data.details[0]; 
      console.log(treeData); 
      tree.setRootNode(treeData); 
     }, 
     failure: function(response, options){ 
       //do error checking 
     } 
    }); 
} 

나는 이것이 당신의 일부를 도움이되기를 바랍니다!