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;'
- });
- });