Extjs向窗口添加多个项不起作用

我有一个定义如下的面板：

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

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: '<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
});

我有一个定义如下的网格：

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

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: '<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
});

var detailGrid=new Ext.grid.GridPanel({
id:'detailGrid'，
存储：数据存储，
可折叠：错误，
专栏行：错，
enableHdMenu:false，
标题：false，
cm：新的Ext.grid.ColumnModel({
默认值：{
可排序：正确
},
{id:'msgId'，hidden:true，dataIndex:'msgId'}，
{sortable:true，dataIndex:'deliveryAddr'}，
{sortable:true，dataIndex:'deliveryDate'}，
{sortable:true，dataIndex:'status'，renderer:function（value，p，record）{
返回String.format（{0}'，value）；}，
{header:'info'，xtype:'templatecolumn'，tpl:'}
}),
视图配置：{
forceFit：对
},
专栏行：错，
帧：假，
可折叠：错误，
答案：错，
标题：alertName，
disableSelection:正确，
延迟渲染：false
});

现在我想把这两个组件添加到一个窗口中

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);
        }
    }]
});

win=新的外部窗口({
布局：'适合'，
标题：“”，
自动销毁：对，
autoScroll：是的，
宽度：600，
身高：400，
可关闭：错误，
朴素：没错，
items:[{detailGrid}，{msgDetailsPanel}]，//这就是错误发生的地方
按钮：[{
文本：“”，
处理程序：函数（）{
赢。藏（这个）；
}
}]
});

我得到一个错误： 应为“：”
当我只在

项下添加
msgDetailsPanel
时，一切正常。
我做错了什么？
尝试替换这一行：

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

与：

尝试替换此行：

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

与：