如何从ExtJS网格显示具有不同存储区的嵌套对象

// 创建数据模型和存储区
Ext.define('ParentModel', {
  extend: 'Ext.data.Model',
  fields: ['id', 'name']
});

Ext.define('ChildModel', {
  extend: 'Ext.data.Model',
  fields: ['id', 'name'],
  belongsTo: 'ParentModel'
});

var parentStore = Ext.create('Ext.data.Store', {
  model: 'ParentModel',
  proxy: {
    type: 'ajax',
    url: 'data/parent.json',
    reader: {
      type: 'json'
    }
  }
});

var childStore = Ext.create('Ext.data.Store', {
  model: 'ChildModel',
  proxy: {
    type: 'ajax',
    url: 'data/child.json',
    reader: {
      type: 'json'
    }
  }
});

// 创建网格组件
var grid = Ext.create('Ext.grid.Panel', {
  store: parentStore,
  columns: [{
    text: 'Parent ID',
    dataIndex: 'id',
    width: 100
  }, {
    text: 'Parent Name',
    dataIndex: 'name',
    width: 200
  }, {
    text: 'Child Name',
    dataIndex: 'childName',
    width: 150,
    renderer: function(value, metaData, record) {
      var childRecord = record.getChildModel();
      return childRecord ? childRecord.get('name') : '';
    }
  }],
  height: 400,
  width: 600,
  renderTo: Ext.getBody()
});

// 加载数据
parentStore.load();
childStore.load();