EXTJS 实现TabPanel 并在各个Tab页中添加js写的panel

初学EXTJS，要实现一个功能，实现两个TAB页切换的效果，并且点每个TAB页还能显示一个js文件中写好的panel，刚开始用panel 加tar的方式，发现这种方式还得写触发TAB切换的功能，好麻烦，本来EXTJS就有 Ext.TabPanel，用它可以，但是怎么也加不了内容，查了KPI才发现TabPanel有个参数很重要，就是frame:true,  这个参数添加后TAB页就加了背景颜色，不是一个HTML的形式了，如下图

如果不设置frame，默认是false，出现的效果图就是背景色是白的，好难看哦

          另个在里边frame中添加JS文件的panel，还得用items, 一开始总以为用HTML，搞了半天也没成功，还得写一堆HTML代码，显示的还是代码内容。

好了，下边把代码贴一下吧。

var tabs = new Ext.TabPanel({   
bodyStyle : 'margin-top:0px',
renderTo: Ext.getBody(),
activeTab: 0,
deferredRender: false,
tabPosition: 'top',   
height : 180,
enableTabScroll: true,
items:[{title:'基本查询',
       frame:true,
       items : [basePanel],
     },{title:'按系统查询',
       frame:true,
       items : [batchPanel]
     }]

}); 

basePanel 就是new 出来的 js中的panel，或在当前js文件中定义一个panel。

var batchItems = new Ext.Panel({
layout : 'form',
height : 130,
style : 'margin:5 0 0 5',
items : [ {
layout : 'column',
items : [{
layout : 'form',
columnWidth : columnwidth,
defaults : {
anchor : anchor
},
labelWidth : labelwidth,
items : [ {} ]
}]
}]
});

var batchPanel = {
id : 'query_view',
autoScroll : true,
border : false,
hideBorders : true,
layout : 'column',
defaults : {
layout : 'form',
columnWidth : 1,
defaults : {
anchor : '-20'
}
},
items : [{
items :batchItems 
}]
       };