Ext JSではグリッドにレンダリングするためにストアがグリッドに接続されていない可能性がありますか？

Question

このサンプルを実行すると、エラーが発生します。「Uncaught TypeError：未定義のget 'を呼び出せません」という問題は、列をレンダリングするときにsotre1の長さが0であることですが、解決する解決策が見つからないこの。シナリオは不合理かもしれませんが、グリッド列をレンダリングするために非連結ストアを使用したいだけですが、列をレンダリングする前にstore1を確実にロードする方法はありますか？ここ はコードです：サーバー側の構造を平らにし、それぞれの子レコードと一緒に親の名前を送信する方が簡単かもしれません

{ 
success: true, 
files: [ 
    {id: 1, name: 'root', pid: 1}, 
    {id: 2, name: 'sub1', pid: 1}, 
    {id: 3, name: 'sub2', pid: 1}, 
    {id: 4, name: 'sub1-1', pid: 2}, 
    {id: 5, name: 'sub1-2', pid: 2} 
] 
} 

Answer 1

：ここ

Ext.onReady(function(){ 
Ext.define('File', { 
    extend: 'Ext.data.Model', 
    fields: ['id', 'name', 'pid'] 
}); 
var store = Ext.create('Ext.data.Store', { 
    model: 'File', 
    //fields: ['id', 'name', 'pid'], 
    proxy: { 
     type: 'ajax', 
     url: 'file.json', 
     reader: { 
      type: 'json', 
      root: 'files', 
      successProperty: 'success' 
     } 
    }, 
    autoLoad: true 
}); 
var store1 = Ext.create('Ext.data.Store', { 
    model: 'File', 
    proxy: { 
     type: 'ajax', 
     url: 'file.json', 
     reader: { 
      type: 'json', 
      root: 'files', 
      successProperty: 'success' 
     } 
    }, 
    autoLoad: true 
}); 
Ext.create('Ext.grid.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'File info', 
    store: store, 
    columns: [ 
     { 
      header: 'ID', 
      dataIndex: 'id' 
     }, 
     { 
      header: 'Name', 
      dataIndex: 'name' 
     }, 
     { 
      header: 'ParentName', 
      dataIndex: 'pid', 
      renderer: function(pid){ 
       var index = store1.find('id', pid); // find it's parent 
       console.log(index); 
       var name = store1.getAt(index).get('name'); 
       return name; 
      } 
     } 
    ] 
}); 

}); 

JSONファイルです。

私はあなたの店が同一であることに気づいた別のものは、なぜちょうど1を使用しないのですか？

Answer 2

AJAX呼び出しの非同期性に関する問題である可能性があります。そのため、レコードにアクセスするときにstore1をロードできませんでした。

あなたは（store1.loadのコールバック内Ext.createを配置しようとすることができます）コール：

store1.load({ 
    callback: function() { 
     Ext.create('Ext.grid.Panel', ...); 
    } 
});