Extjs adding multiple items to a window does not work

I have a panel defined like this:

var msgDetailsPanel = new Ext.ux.ManagedIFrame.Panel({
    title: 'M',
    header: true,
    width:700,
    height:200,
    autoScroll: true
});

And I have a Grid defined like this:

var detailGrid = new Ext.grid.GridPa开发者_运维百科nel({
    id:'detailGrid',
    store: dataStore,
    collapsible: false,
    columnLines: false,
    enableHdMenu: false,
    header: false,
    cm: new Ext.grid.ColumnModel({
        defaults: {
            sortable: true
        },
        {id:'msgId',hidden: true, dataIndex: 'msgId'},                    
        {sortable: true, dataIndex: 'deliveryAddr'},
        {sortable: true, dataIndex: 'deliveryDate'},
        {sortable: true, dataIndex: 'status', renderer:function(value, p, record){
            return String.format( '<font color="009966">{0}</font>', value );}},
        {header: 'info',xtype: 'templatecolumn',tpl: '<a href="#"  onClick = "alert({msgId})">View Message Details</a>'}  
    }),
    viewConfig: {
        forceFit:true
    },
    columnLines: false,
    frame:false,
    collapsible: false,
    animCollapse: false,
    title: alertName,
    disableSelection: true,
    deferRowRender:false
});

Now I want to add these two components to a window.

win = new Ext.Window({
    layout:'fit', 
    title: '<spring:message code="title.alertDetails" />',
    autoDestroy: true,
    autoScroll: true,
    width:600,
    height:400,
    closable:false,
    plain: true,
    items: [{detailGrid}, {msgDetailsPanel}],//This is where error comes
    buttons: [{
        text: '<spring:message code="label.button.close" />',
        handler: function(){
            win.hide(this);
        }
    }]
});

I get error: Expected ':'

When I am adding only the msgDetailsPanel under items, things work fine. What am I doing wrong?

Try replacing this line:

items: [{detailGrid}, {msgDetailsPanel}],

with:

items: [detailGrid, msgDetailsPanel],