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

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

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

文章标签：

本文详细介绍了ExtJS中的Tab选项卡组件的基本用法，包括如何创建、配置和操作Tab选项卡，以及与TabPanel组件的交互。通过示例代码展示了如何在HTML中集成并自定义Tab选项卡，为前端开发者提供了实用的指南。

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> 