5、TabPanel控件使用

快速编写Demo

创建tabPanel.html


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>

<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css">link>

<script src="ext-3.4.1/adapter/ext/ext-base.js">script>

<script src="ext-3.4.1/ext-all.js">script>
<script src="tabpanel.js">script>
head>
<body>
body>
html>


创建tabpanel.js

function isRender(p) {
    // alert(p.title + "被渲染了");
}
Ext.onReady(function() {
            var i = 1;
            var tabpanel = new Ext.TabPanel({
                        // TabPanel里面的选项板是一个Panel
                        //默认展开的panel是第二个
                        activeTab : 1,
                        deferredRender : false,
                        enableTabScroll : true,
                        // tabPanel在页面底部
                        // tabPosition:"bottom",
                        bbar : [{
                                    text : "添加选项",
                                    handler : function() {
                                        var id = "tab" + i;
                                        tabpanel.add({
                                                    title : "子面板" + i++
                                                });
                                        tabpanel.setActiveTab(id);
                                    }
                                }, {
                                    text : "删除选项",
                                    handler : function() {
                                        var tab = tabpanel.getActiveTab();
                                        tabpanel.remove(tab);
                                    }
                                }],
                        items : [{
                                    xtype : "panel",
                                    title : "面板1",
                                    html : "选项1",
                                    listeners : {
                                        render : isRender
                                    }
                                }, {
                                    title : "面板2",
                                    autoLoad : "news.html",
                                    listeners : {
                                        render : isRender
                                    }
                                }, {
                                    title : "面板3",
                                    autoLoad : "news2.html",
                                    closable : true,
                                    listeners : {
                                        render : isRender
                                    }
                                }]
                    });
            new Ext.Viewport({
                        layout : "fit",
                        items : tabpanel
                    });
        });

执行效果如下:
5、TabPanel控件使用_第1张图片

知识点解析

activeTab : String/Number

一个字符串或数字(索引)表示,渲染后就活动的那个tab(默认为没有)。

deferredRender : Boolean

内置地,Tab面板是采用Ext.layout.CardLayout的方法管理tabs。此属性的值将会传递到布局的Ext.layout.CardLayoutdeferredRender配置值中,
以决定tab面板是否只有在第一次访问时才渲染(缺省为true)。注意如果将deferredRender设为true的话,
又使用form的话,那表示只有在tab激活之后,全部的表单域(Fields)才会被渲染出来,
也就是说不管是提交表单抑或是执行getValues或setValues都是无用。

enableTabScroll : Boolean

有时标签页会超出TabPanel的整体宽度。为防止此情况下溢出的标签页不可见,就需要将此项设为true以出现标签页可滚动的功能。只当标签页位于上方的位置时有效(默认为false)。

tabPosition : String

Tab候选栏渲染的位置(默认为 ‘top’)。其它可支持值是’bottom’。注意tab滚动(tab
scrolling)只支持’top’的位置。

你可能感兴趣的:(EXTJS,EXTJS)