ExtJS4学习笔记(十五)---选项卡(tabs)

最新推荐文章于 2019-10-29 15:17:28 发布

iteye_12837

最新推荐文章于 2019-10-29 15:17:28 发布

阅读量182

点赞数

文章标签： xhtml javascript ViewUI

tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本用法。

HTML代码：除了加载基本库以外，定义了一些CSS样式，这些CSS基本没用，就是我看着所有组件靠着BODY太不舒服了。。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <htmlxmlns="http://www.w3.org/1999/xhtml">  
<head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>  
 <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>  
 <scripttype="text/javascript"src="../../bootstrap.js"></script>  
 <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>  
 <scripttype="text/javascript"src="tabs1.js"></script>  
<title>MHZG.NET--Tabs</title> 
<style> 
 .main{margin:50pxauto;}  
 #add{padding-left:10px;}  
</style> 
</head> 
 
<body> 
 <divclass="main">  
 <divid="add"></div>  
 <divid="tab"></div>  
</div> 
</body> 
</html> 

tabs1.js：

Ext.require('Ext.tab.*');
Ext.onReady(function(){
varcurrentItem;
vartabs=Ext.createWidget('tabpanel',{
renderTo:'tab',
resizeTabs:true,
enableTabScroll:true,
margin:'10',
width:600,
height:250,
defaults:{
autoScroll:true,
bodyPadding:10
},
items:[{
title:'选项卡',
html:'选项卡内容',
closable:true
}]
});
varindex=0;
functionaddTab(closable){
++index;
tabs.add({
title:'新选项卡-'+index,
html:'新选项卡内容'+index+'<br/><br/>',
closable:!!closable
}).show();
}
Ext.createWidget('button',{
renderTo:'add',
text:'创建可关闭选项卡',
handler:function(){
addTab(true);
}
});
Ext.createWidget('button',{
renderTo:'add',
text:'创建不可关闭选项卡',
handler:function(){
addTab(false);
},
style:'margin-left:8px;'
});
});

iteye_12837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4学习笔记(十五)---选项卡(tabs)

tab选项卡，是Extjs中常用的组件，tab一般依附于tabpanel，很多时候我也认为tab就是tabpanel,但在官方api中，确实有Ext.tab.Panel和Ext.tab.Tab之分，具体属性、事件、方法，请参考API，tab选项卡可以单独渲染，使用方法是：xtype: 'tab'，本文介绍tab的基本用法。HTML代码：除了加载基本库以外，定义了一些CSS样式，这些CSS基...
复制链接

扫一扫