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

最新推荐文章于 2023-06-17 22:56:23 发布

sandykwx

最新推荐文章于 2023-06-17 22:56:23 发布

阅读量551

点赞数

分类专栏： ExtJS

ExtJS 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

sandykwx

关注

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基本没
复制链接

扫一扫

专栏目录