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页

Extjs 4.0 Tab页的更多相关文章

  1. 使用CSS和jQuery实现tab页

    使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...

  2. 自制tab页

    没事自己弄着玩,写了个tab页.不要当真.想看就看看.希望相互学习. 效果预览:html源码: <!DOCTYPE html> <html lang="en"&g ...

  3. Android下实现tab页个人比较推崇的方法

    使用fragment实现tab页的效果: 三个页面是单独的三个Fragment 主Activity的实现: package com.hsx.tab; import android.os.Bundle; ...

  4. ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  5. 使用原生js与jQuery分别实现一个简单的tab页签

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括 ...

  6. chrome浏览器tab页内存占用变大,网站变慢为哪般?

    问题概述: 公司做的是BS应用. 之前我们的后台服务器程序是带状态的,用ehcache存储登录状态:这两天被我改成了redis存储,应用本身不再存储登录状态. 然后自测,我在测试某个很耗时间的网页操作 ...

  7. JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

    前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理 ...

  8. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  9. bootstrap tabs 默认tab页的使用方式

    HTML中引入tabs如下: <ul class="nav"> <li><a href="#a" tt="A.html& ...

随机推荐

  1. NOI2001 食物链

    食物链 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种 ...

  2. 通过重写 class 的 ToString() 来简化获取 enum 的 DescriptionAttribute 值

    通过重写 class 的 ToString() 来简化获取 enum 的 DescriptionAttribute 值 目录 一.常见的 enum 类型 二.演变:class 版本的 enum 类型 ...

  3. left join on/right join on/inner join on/full join on连接

    现在有两张表,第一张表是用户表,第二张表是订单表.情况是这样的,在我这张用户表里用户很多,但是真正下单的人却不多,而且,每一个用户可以有多个订单.然后领导喊话了,小王,你给我查下,现在咱们的订单有多少 ...

  4. Git:warning: LF will be replaced by CRLF

    windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示,解决办法: $ rm -rf .git // 删除.git $ git config --gl ...

  5. python数据类型之元组、字典、集合

    python数据类型元组.字典.集合 元组 python的元组与列表类似,不同的是元组是不可变的数据类型.元组使用小括号,列表使用方括号.当元组里只有一个元素是必须要加逗号: >>> ...

  6. apache 限制IP访问

    <Directory "/var/www"> Options All AllowOverride None Order Deny,Allow Deny From all ...

  7. 结合Nginx以cgi方式安装php5.5.4

    新建用户及用户组 groupadd webuser useradd -g webuser webuser 下载php-5.5 下载链接:http://pan.baidu.com/s/1i3CBshv ...

  8. 如何更改图片的背景色(PS、证件照之星)

    如何更改图片的背景色(PS.证件照之星) 1.1  证照之星教你如何给证件照换背景 证照之星教你如何给证件照换背景?这个问题困扰很多人,如果你不了解证照之星,一款专业的证件照片制作软件,你肯定就无法自 ...

  9. java多线程之内存可见性-synchronized、volatile

    1.JMM:Java Memory Model(Java内存模型) 关于synchronized的两条规定: 1.线程解锁前,必须把共享变量的最新值刷新到主内存中 2.线程加锁时,将清空工作内存中共享 ...

  10. 洛谷 [p1439] 最长公共子序列 (NlogN)

    可以发现只有当两个序列中都没有重复元素时(1-n的排列)此种优化才是高效的,不然可能很不稳定. 求a[] 与b[]中的LCS 通过记录lis[i]表示a[i]在b[]中的位置,将LCS问题转化为最长上 ...