Extjs 4.0 Tab页

1、JSON代码

Ext.MyTabs=Ext.extend(Ext.TabPanel ,{
xtype:"tabpanel",
	activeTab:2,
	width:694,
	height:571,
	initComponent: function(){
		this.items=[
			{
				xtype:"panel",
				title:"学生",
				autoScroll:false,
				width:703,
				items:[
					{
						xtype:"grid",
						title:"我的表格",
						columns:[
							{
								header:"学号",
								sortable:true,
								resizable:true,
								dataIndex:"data1",
								width:100
							},
							{
								header:"姓名",
								sortable:true,
								resizable:true,
								dataIndex:"data2",
								width:100
							},
							{
								header:"性别",
								sortable:true,
								resizable:true,
								dataIndex:"data3",
								width:100
							},
							{
								header:"年龄",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"电话",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"住址",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"QQ",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							}
						]
					}
				]
			},
			{
				xtype:"panel",
				title:"教师",
				items:[
					{
						xtype:"grid",
						title:"我的表格",
						columns:[
							{
								header:"工号",
								sortable:true,
								resizable:true,
								dataIndex:"data1",
								width:100
							},
							{
								header:"姓名",
								sortable:true,
								resizable:true,
								dataIndex:"data2",
								width:100
							},
							{
								header:"年龄",
								sortable:true,
								resizable:true,
								dataIndex:"data3",
								width:100
							},
							{
								header:"性别",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"电话",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"电话",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"QQ",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							}
						]
					}
				]
			},
			{
				xtype:"panel",
				title:"课程",
				items:[
					{
						xtype:"grid",
						title:"我的表格",
						columns:[
							{
								header:"编号",
								sortable:true,
								resizable:true,
								dataIndex:"data1",
								width:100
							},
							{
								header:"名称",
								sortable:true,
								resizable:true,
								dataIndex:"data2",
								width:100
							},
							{
								header:"教授教师",
								sortable:true,
								resizable:true,
								dataIndex:"data3",
								width:100
							},
							{
								header:"选课人数",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"上课时间",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"分数",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							},
							{
								header:"学生学号",
								sortable:true,
								resizable:true,
								dataIndex:"",
								width:100
							}
						]
					}
				]
			}
		]
		Ext.MyTabs.superclass.initComponent.call(this);
	}
})

2、执行结果

（1）学生Tab页

（2）教师Tab页

（3）课程Tab页