Ext js tabpanel的使用

实现的功能就是当点击左边的“增加Tab”菜单后会不断的增加新的tab页，再次记录，以便后用！

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link rel="stylesheet" type="text/css" href="css/ext-all.css">
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<title>Insert title here</title>
</head>
<body>
    <script>
        var index = 0;PHP中Array的hash函数实现
        var tabPanel = new Ext.TabPanel({
            region:"center",//将此tabpanel放到viewport的中间区域去
            closable:true,//tab页上加上关闭图标
            enableTabScroll:true,//当页面显示的tab页过多超过显示区域后，会自动出现箭头隐藏之前的tab页
            items:[{title:"面板1",contentEl:"tab1",closable:true},{title:"面板2",contentEl:"tab2"}]
        });
        Ext.onReady(
        function(){
            new Ext.Viewport({
                enableTabScroll:true,
                layout:"border",    //border布局
                items:[
                {title:"面板",region:"north",height:50,html:"后台管理"},
                {title:"菜单",region:"west",width:200,collapsible:true,
                html:"<a href='javascript:addTab()'>增加Tab</a>"},
                tabPanel
                ]
            });
        }
        );
        function addTab(){
            tabPanel.add({
                title:"tab"+index,
                id:"tab"+index,
                html:"这里是tab"+index
            });
            tabPanel.setActiveTab("tab"+index);//激活新增加的tab页
            index++;
        }

    </script>
    <div id="tab1">这里是默认的tab1</div>
    <div id="tab2">这里是默认的tab2</div>

</body>

转载于:https://www.cnblogs.com/ctou45/archive/2011/05/11/2042945.html

Ext js tabpanel的使用相关推荐

《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
Ext JS 4.1 RC2 Released发布
原文:http://www.sencha.com/blog/ext-js-4-1-rc-2-released/ Today we're making available Ext JS 4.1 RC2, ...
Ext JS 4.2.0发布
下载地址:http://www.sencha.com/products/extjs/download/ext-js-4.2.0/2142 Release Notes for Ext JS 4.2.0 ...
EXT JS 4.3 在线学习
官网地址:http://docs.sencha.com/extjs/4.1.3/ 相关示例:http://docs.sencha.com/extjs/4.1.3/#!/example Examples ...
Ext JS 6 下载与设置
Decument http://docs.sencha.com/extjs/6.0.2-classic/guides/getting_started/getting_started.html Setu ...
Ext JS的4.1.0的RC 1的发行说明
Ext JS的 - JavaScript框架 Ext JS的4.1.0的RC 1的发行说明发行日期:2012年3月13, 版本号:4.1.0的RC 1 修正的错误钮 EXTJSIV-5129 按钮 ...
Ext Js简单面板及工具栏的创建使用
面板是比较基础的组件,很多的组件都是在Panel的基础上封装.创建的,可以把面板理解为一个容器,可以存放一些更多的组件在里面让页面更好看.功能更完善. 1.对于Panel中的tbar\bbar\but ...
Ext JS 6.7 中文文档：应用架构介绍（MVC/MVVM）
最近为了做内网的后台学了下 Ext JS,觉得挺有意思的,顺手翻译一下文档,主要是架构部分和核心概念部分. 这个文档是我目前看到的最好的关于 MVC.MVVM 的解释与探讨,十分值得参考. 本篇目录 ...
Ext JS 容器Containers
Ext JS 容器可以容纳其他组件的组件叫容器(Containers).容器里面可以运用不同的布局方式来随意添加,插入或删除子组件.Ext.container.Container这个类是所有容器类的 ...

Ext js tabpanel的使用

Ext js tabpanel的使用相关推荐

最新文章

热门文章