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

来源：互联网发布：sql server 注释编辑：程序博客网时间：2024/06/05 20:23

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../bootstrap.js"></script><script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="tabs1.js"></script><title>MHZG.NET--Tabs</title><style>.main{ margin:50px auto;}#add{ padding-left:10px;}</style></head><body><div class="main"><div id="add"></div><div id="tab"></div></div></body></html>

tabs1.js：

Ext.require('Ext.tab.*');Ext.onReady(function(){var currentItem;    var tabs = 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        }]            });var index = 0;function addTab (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;'    });});