<!--这里使用Tab标签页做了几个尝试,首先是出现标签页;然后是标签页可用性设置;接着是标签页的内容控制,从外部导入以及引用其他的页面。xcl-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/tab.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
var ta = "<html><body>只是美丽我们回不到那天</body></html>";//尝试了在外部引入html
var tabs = new Ext.TabPanel({
renderTo:'tabs1',
activeTab:0,
items:[
{title:'tab1',html:'<input type="button" οnclick=fun() value="click"></input>'},
{title:'tab2',html:'Another'},
{title:'tab3',id:'tab3',disabled:true,html:ta}, //设置开始时不可用
{title:'tab4',html:'<div><iframe src ="http://localhost:8080/GridPortal1.0" height="600" width="100%"></iframe></div>'} //尝试引入了一个iframe
]
});
});
function fun(){
alert("ok");
Ext.getCmp('tab3').disabled = false;//设置tab3标签页可用
}
</script>
<div id='tabs1'></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/tab.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
var ta = "<html><body>只是美丽我们回不到那天</body></html>";//尝试了在外部引入html
var tabs = new Ext.TabPanel({
renderTo:'tabs1',
activeTab:0,
items:[
{title:'tab1',html:'<input type="button" οnclick=fun() value="click"></input>'},
{title:'tab2',html:'Another'},
{title:'tab3',id:'tab3',disabled:true,html:ta}, //设置开始时不可用
{title:'tab4',html:'<div><iframe src ="http://localhost:8080/GridPortal1.0" height="600" width="100%"></iframe></div>'} //尝试引入了一个iframe
]
});
});
function fun(){
alert("ok");
Ext.getCmp('tab3').disabled = false;//设置tab3标签页可用
}
</script>
<div id='tabs1'></div>
</body>
</html>