写一个ExtJs的页面框架

今天试着写了一个ExtJs的页面展现，就是一个大框，没什么功能，供以后在应用的时候作为参考，页面的结构是：左边一个树，右面一个tabPanel，tabPanel中通过iframe套了一个Grid，

首先是index页面
index页面中定义一个<div id="header" style="height:90px;"></div>

index.js代码如下
Ext.onReady(function(){
new Ext.Viewport({
layout : 'border' ,
items : [{
region : 'north' ,
el : 'header'
},new treePart(),myTab]
})
}) ;

treePart = function(){
treePart.superclass.constructor.call(this,{
region : 'west' ,
width : 200 ,
margins:'5 0 5 5',
cmargins:'0 5 5 5',
height : 300 ,
collapsible : 'true' ,
title : '菜单' ,
loader : new Ext.tree.TreeLoader() ,
border : 'false' ,
autoScroll : 'true' ,
root : new Ext.tree.AsyncTreeNode({
text : '菜单' ,
children : [{
text : '节点1' ,
leaf : true ,
listeners : {
'click':function(){
this.firstClick() ;
},
scope : this
}
},{
text : '节点2' ,
children : [{
text : '节点3' ,
leaf : true
}]
}]
})
})
} ;
Ext.extend(treePart,Ext.tree.TreePanel,{
id : 'mytree' ,
firstClick : function(){
myTab.add({title:'节点1',html : "<iframe src='grid.jsp' style='border:none;width:600;height:400px;'>",closable:true}).show() ;
}
})

myTab = new Ext.TabPanel({
region : 'center' ,
margins : '5,5,5,0' ,
width : 300 ,
activeTab : 0 ,
frame : true ,
defaults : {authHeight : true} ,
items : {
title : '显示列表' ,
html : "<iframe src='grid.jsp' style='border:none;width:600;height:400px;'>"
}
}) ;


grid.jsp页面定义<div id="grids" style="width:400px;height:400px"></div>

grid.js代码如下

IndexGrid = function(){

IndexGrid.superclass.constructor.call(this,{
renderTo : 'grids' ,
//title : '中心显示区域' ,
height : 300 ,
width : 500 ,
margins : '5,5,5,0' ,
tbar: [{text : '添加'},{text :'删除'}] ,
colModel : new Ext.grid.ColumnModel([{
header : '姓名' ,
dataIndex : 'name'
},{
header : '年龄' ,
dataIndex : 'age'
},{
header : '性别' ,
dataIndex : 'sex'
}]) ,
store : new Ext.data.SimpleStore({
fields : ['name' ,'age' , 'sex'] ,
data : [['张三','21','男'],['张三','21','男'],['张三','21','男']]
})
})
}
Ext.extend(IndexGrid,Ext.grid.GridPanel,{

}) ;
Ext.onReady(function(){
new IndexGrid() ;
})