Grid rows with nested data from loaded store - extjs

Question

I have a dataview that gets loaded with a parameter. I render this data in a template. I am trying to use the same data in which there is a nested item to render to a grid.
The data looks like this:
{
"myJson": {
"name": "abc",
"type": "faulty",
"notes": [
{
"date": "01-01-1970",
"note": "test note"
},
{
"date": "01-02-1970",
"note": "test note 2"
}
]
}
}
The store:
proxy: {
type: 'ajax',
url: '/api/detail/',
reader: {
type: 'json',
root: 'myJson'
}
}
Model:
{
name:'name',
},
{
name:'type',
},
{
name:'notes',
mapping:'notes'
},
Template:
{name} - {type}
That all works. What I'd like to do is use the notes chunk to display in a grid. Problem is I can't get it to read the notes group.
var notesListView = new Ext.list.ListView({
store: 'myStore',
multiSelect: false,
width:'100%',
id:'notesList',
columns: [{
header: 'Date',
width: 75,
dataIndex: 'date'
},{
header: 'Note',
width: 150,
dataIndex: 'note',
}]
});
Is it even possible to do this? Or do I need to create a new store and model to use this group of data in a grid?
I've tried mapping to notes.date, for instance, in both the model
name:'note_date',
mapping:'notes.date'
and in the grid itself
dataIndex:'notes.date'
neither of which worked.
I've also tried using renderer but this doesn't work either as it's an array
renderer:function(value, metaData, record, rowIndex, colIndex, store){
var value = value.date;//won't work; it needs an index a la value[0].date
return value;
}

Answer 1

You could create a nested model with the same data you are receiving. It would be like this
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']
});
This way you could access the children of any give record like this
var jsonRecordChildren = jsronRecord.notes()
The variable jsonRecordChildren that I just created is of the type Store, so you could easily assign it to the attribute store of a grid.
Ext.create('Ext.grid.Panel', {
store: selectedRecord.notes(),
columns: [
{ text: 'Date', dataIndex: 'date' },
{ text: 'Note', dataIndex: 'note'}
],
renderTo: Ext.getBody()
});
http://jsfiddle.net/alexrom7/rF8mt/2/