zoukankan      html  css  js  c++  java
  • Extjs 4.0 Tab页

    1、JSON代码

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

    2、执行结果

    (1)学生Tab页


    (2)教师Tab页


    (3)课程Tab页


  • 相关阅读:
    python读取 ini 配置文件
    Mysql 存储过程声明及使用
    PAT乙级1002
    Pat乙级1001
    第四届蓝桥杯省赛翻硬币
    蓝桥杯第四届省赛错误票据
    蓝桥杯第四届省赛前缀判断
    蓝桥杯第四届省赛第39级台阶
    蓝桥杯第四届省赛马虎的算式
    蓝桥杯第三届省赛试题取球游戏
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315397.html
Copyright © 2011-2022 走看看