首页 > 程序开发 > web前端 > JavaScript >

Extjs4---tab选项卡--基本选项卡

2012-09-20

完整代码下载地址:1、基本的选项卡tabPanel.html:[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; cha...

完整代码下载地址:

1、基本的选项卡

tabPanel.html:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Form</title>

<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
<script type="text/javascript" src="ext4/ext-all.js"></script>
<script type="text/javascript" src="js/tabPanel.js"></script>

</head>

<body>
<div style="display: none;">
<div id="tab2">
从页面的div中传入的数据
</div>
</div>
</body>
</html>

tabPanel.js

[javascript]
Ext.require(
&#39;Ext.tab.*&#39;
);
Ext.onReady(



function(){
Ext.create(
&#39;Ext.tab.Panel&#39;,
{
renderTo:Ext.getBody(),
activeTab:0,
width:600,
height:300,
plain:true,
defaults:{
autoScoll:true
},
items:[
{
//id:&#39;tab1&#39;,
title:&#39;Tabs-1&#39;,
html:&#39;这是一个普通的tab&#39;
},{
title:&#39;tab-2&#39;,
contentEl:&#39;tab2&#39;
},{
//id:&#39;tab2&#39;,
title:&#39;ajax Tab&#39;,
autoLoad:{
url:&#39;tabAction&#39;,
params:{
data:&#39;从客户端传入的参数&#39;
},
method:&#39;GET&#39;
}

},{
title:&#39;事件tab&#39;,
listeners:{
activate:function(tab){
alert(tab.title + &#39;: activate事件触发。&#39;);
}
},
html:&#39;带事件的tab&#39;,
autoLoad:false
},{
title:&#39;不可用的tab&#39;,
disabled: true
}
]
}
);
}
);

效果图:

相关文章
最新文章
热点推荐