Extjs :怎么动态调用js文件

问题是是这样子的我在window中房一个tabpanel，然后每一个tab里面都放一个gridpanel，如果在一个js里面把所有的gridpanl都写完了，js文件显得很大，我想把一些gridpanel写在其他的js文件里面，然后去调用。

tabpanel.js
var companyInfoTab = new Ext.TabPanel({
id : "s",
activeTab : 0,
title:"气卡查询",
width :'100%',
height : 500,
bodyBorder:true,
frame:true,
resizeTabs:true,
  deferredRender : false,
plain : true,
defaults : {
autoScroll : true
},

items : [{
id : "2",
title : '公司信息',
//iconCls:'logoss',
width:800,
closable:true,
layout : "border",
items : [{
region:"west",
width:"30%",
items : [findForm]
}, {
region:"center",
width:"100%",
items : [grid1]
}]

}, {
id : "3",
closable:true,
title : '发卡信息',
width:800,
closable:true,
layout : "border",
listeners:{beforerender:function(){
 
} 
},

items : [{
region:"west",
width:"30%",
items : [carinfoForm]
}, {
region:"center",
width:"70%",

items : [grid2]
}]


}, {
id : "4",
closable:true,
title : '充值信息'
//iconCls:'logoss'

}

]

}

);

我想把grid1，grid2，写在grid1.js,grid2.js里面，然后再tabpanel.js里面调用，不知道该怎么做，请大家帮忙想想，谢谢了

页面里都引下 就可以调了 但做好都写成function 最后return你的组件 不要写成全局变量