ExtJS5 JSONをTreeStoreから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のデベロッパーツールとFirebugの[ネットワーク]タブにjsonの無限のリクエストが表示されますが、ビューには読み込まれません。

正しい方向に私を指し示すものは、非常に役に立ちます！シンタックスが正しいように私が間違っていることは考えられないので、私は打ちのめされました。

ありがとうございます！

編集：私のビューではインラインでストアを作成するときにjsonデータを読み込むことができましたが、別のstore.jsファイルではロードできませんでした。また、私はそうのような店の初期設定を変更：

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に必要なものにアクセスすることができながら、JSONの書式設定（および単一の要求でより多くの情報を送る能力）に柔軟性を持たせることができます。ここで

は、ストアデータをロードし、私が書いた関数は、（私の周り私の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 
     } 
    }); 
} 

私は、これはあなたの一部に役立ちます願っています！