Extjs adding multiple items to a window does not work - extjs

Question

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.GridPanel({
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: 'View Message Details'}
}),
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?

Answer 1

Try replacing this line:
items: [{detailGrid}, {msgDetailsPanel}],
with:
items: [detailGrid, msgDetailsPanel],