<%@ 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>