Nested Model

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>

JavaScript

Ext.define("JsonModel", {
    extend: 'Ext.data.Model',
    fields: ['name','type'],
    hasMany: [{
        model: 'Note',
        name: 'notes'
    }]
});


Ext.define("Note", {
    extend: 'Ext.data.Model',
    fields: [
        'date',
        'note']
});

var data = 
{
    "myJson": {
        "name": "abc",
        "type": "faulty",
        "notes": [
            {
                "date": "01-01-1970",
                "note": "test note"
            },
            {
                "date": "01-02-1970",
                "note": "test note 2"
            }
        ]
    }
 };





Ext.create('Ext.data.Store', {
    storeId : 'JsonStore',
    model    : 'JsonModel',
    autoLoad: true,
    data    : data,
     proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'myJson'
        }
    }
});

var tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '{name} - {type}',
    '</tpl>'
);


Ext.create('Ext.DataView', {
    renderTo          : Ext.getBody(),
    store             : Ext.getStore('JsonStore'),
    tpl               : tpl    
});

var selectedRecord = Ext.getStore('JsonStore').getAt(0);

Ext.create('Ext.grid.Panel', {
    store: selectedRecord.notes(),
    columns: [
        { text: 'Date',  dataIndex: 'date' },
        { text: 'Note', dataIndex: 'note'}
    ],
    renderTo: Ext.getBody()
});