Extjs Grid Master Detail Ajax

This example show EXTJS bug to load complicated json data by Ext.data.Store

by elganz

HTML

<link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.3/extjs-build/resources/css/ext-all.css">
<script src="http://docs.sencha.com/extjs/4.1.3/extjs-build/ext-all-dev.js"></script>
`

JavaScript

Ext.define('modelMaster', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'}, 
        {name: 'params.param'},
        {name: 'items'}
    ]    
});

Ext.define('modelDetail', {
    extend: 'Ext.data.Model',
    fields: ['item', 'detail.id']
});

var storeMaster = Ext.create('Ext.data.Store', {
    model: modelMaster,
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        actionMethods: {read: 'POST'}, // echo ajax service required
        extraParams: {
            json: Ext.JSON.encode({
                root: [{name: 'one', params:{param:'param1'}, items: [{item: 'item1', detail:{}}, {item: 'item2', detail: {id: '1'}}]},
                       {name: 'two', params:{param:'param2'}, items: [{item: 'item3', detail:{}}, {item: 'item4', detail: {id: '2'}}]}]
            })
        },
        reader: {
            type: 'json',
            root: 'root'
        }
    },
    listeners: {
        load: function (store, records, successful, eOpts) {
            var rec = [{item: 'item1', detail: {}}, 
                       {item: 'item2', detail: {id: '1'}}];
            var initRec = records[0]; 
            console.log(initRec.raw.items);
            console.log(rec);

            var storeDetail = Ext.create('Ext.data.Store', {
                model: modelDetail,
                proxy: {
                    type: 'memory',
                    reader:{
                        type:'json'
                    }
                },                
                data: initRec.raw['items']
                //data: rec
            });

            var gridDetail = Ext.create('Ext.grid.Panel', {
                title: 'Detail',
                columns: [
                    {text: 'Item', dataIndex: 'item', flex: 1}, 
                    {text: 'Detail ID', dataIndex: 'detail.id', flex: 1}
                ],
                store: storeDetail
            });
            
            var gridMaster =...