Extjs Grid Master Detail

This example show EXTJS bug and get solution to load detail records into other grid.

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 onLoad = 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 = Ext.create('Ext.grid.Panel', {
        title: 'Master',
        columns: [
            {text: 'Name', dataIndex: 'name', flex: 1},
            {text: 'Param', dataIndex: 'params.param', flex: 1}
        ],
        store: store,
        listeners: {
            cellclick: function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                //gridDetail.getStore().loadData(record.data.items); //<-- doesn't work!
                gridDetail.getStore().loadRawData(record.raw['items']);
            },
            afterrender: function (grid) {
                grid.getSelectionModel().select(initRec, true, false);
            }
        }
    });
    
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: {
            type: 'hbox',
            align: 'stretch',
            padding: 10
        },
        defaults: {
            flex: 1
        },
       ...