viewPort的center区域能否动态添加grid

Question

[code="js"]
new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: '

Page Title

',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 200
// the west region might typically utilize a TreePanel or a Panel with Accordion layout
}, {
region: 'south',
title: 'Title for Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'Title for the Grid Panel',
collapsible: true,
split: true,
width: 200,
xtype: 'grid',
// remaining grid configuration not shown ...
// notice that the GridPanel is added directly as the region
// it is not "overnested" inside another Panel
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
items: [grid1,grid2]
}]
});

[/code]

如上代码，我需要在center区域动态的添加grid3，这个怎么实现？

Answer 1

var center = vi.items.get(vi.items.length-1); //通过 Viewport 获取center区域组件
center.add(grid3);
center.doLayout();