`

Ext Tab 编写多标签页面

    博客分类:
  • EXT
阅读更多
<!--这里使用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" onclick=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>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics