Ext.TabPanel组件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
	<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){
		
			var tabs=new Ext.TabPanel({
				renderTo:document.body,
				height:200,
				enableTabScroll: true//左右滚动
			});
			
			tabs.add({
				title:'标题1',
				html:'内容1'
				//autoLoad: {url: '02-05c1.html'}
			});
			
			tabs.add({
				id:Ext.id(),
				title:'标题2',
				html:'内容2',
				closable:true//是否关闭选项卡
			});
			
			tabs.activate(0);
			
			var addgrid=new Ext.Button({
				text:'添加一个grid',
				renderTo:document.body,
				handler:addgrid
			});
			
			
			function addgrid(){
				//Ext.Msg.alert('标题','内容说明');
				var id=Ext.id();
				var store=new Ext.data.SimpleStore({
					fields:['id','name'],
					data:[
						['1','name1'],
						['2','name2']
					]
				});
				
				var columns=new Ext.grid.ColumnModel([
					{header:'序号',dataIndex:'id'},
					{header:'名称',dataIndex:'name'}
				]);
				
				var grid=new Ext.grid.GridPanel({
					store:store,
					cm:columns
				});
				
				var tab=tabs.add({
					title:'表格'+id,
					closable:true,
					layout:'fit',
					items:[grid]
				});
				
				tabs.activate(tab);
			}
			
			
			
			
			var addpanel=new Ext.Button({
				text:'添加一个panel',
				renderTo:document.body,
				handler:addpal
			});
			
			function addpal(){
				var id=Ext.id();
				var panel=new Ext.Panel({
					html:'aaaaaaaaaaaaaaa'
				});
				
				var tab=tabs.add({
					title:'panel'+id,
					closable:true,
					layout:'fit',
					items:[panel]
				});
				
				tabs.activate(tab);
			}
			
		});
	</script>
  </head>
  <body> 
  </body>
</html>

 

你可能感兴趣的:(JavaScript,html,css,ext)