EXT布局问题

目前代码
Ext.onReady(function(){
new Ext.Viewport({ //实例化布局对象
layout:"border", //声明为border布局
items:[{ //布局项目
region:"north",//表示为north区域,顶部区
height:50, //区域高度
title:"顶部面板" //区域标题
},{
region:"center",
//autoLoad:{url:"hello.jsp",scripts:true},//中间加载的网页,并允许支持JS脚本
//enableTabScroll : true,
//titlebar: true,
//autoScroll: true,//多出内容出现滚动条
title:"中央面板"
},{
region:"west",
width:150,
collapsible : true,//是否可以收缩,默认不可以收缩，即不显示收缩箭头
split : true,//是否可以改变面板大小
html:"选项1
选项2
选项3",
title:"左边面板"
}]
});

});
[img]http://kid12342002.iteye.com/upload/picture/pic/39020/120d9f69-147b-3773-85cc-72141f5e6117.jpg[/img]
我现在要把中央面板换成,Advanced Tabs的先项卡(也就是ext2.2API这种),

so easy 你仔细研究官方示例你就会明白
[code="js"]Ext.onReady(function() {
var tabs = new Ext.TabPanel({
region: 'center',
width: 600,
height: 250
});
new Ext.Viewport({ //实例化布局对象
layout: "border",
//声明为border布局
items: [{
region: "north",
//表示为north区域,顶部区
height: 50,
//区域高度
title: "顶部面板" //区域标题
},
tabs, //上面定义的tab
{
region: "west",
width: 150,
tbar: [{
text: '增加右侧Tab',
handler: function() { //点击时所要触发的函数
tabs.add({
title: '新tab',
//标题
html: '我是新增的tab的内容',
//内容
closable: true //设置新增的面板可以被关闭
}).show(); //渲染出来
}
}],
collapsible: true,
//是否可以收缩,默认不可以收缩，即不显示收缩箭头
split: true,
//是否可以改变面板大小
html: "选项1
选项2
选项3",
title: "左边面板"
}]
});
});[/code]