<!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=gbk"/>

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

        <script language="javascript" src="extjs/ext-all.js"></script>

        <script language="javascript" src="Jquery/jquery-1.8.1.min.js"></script>

        <script type="text/javascript" src="js/tabs.js"></script>

        <title>选项卡</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>

tabs.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;'

    });

});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>

    <HEAD>

        <TITLE></TITLE>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk">

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

        <!--<script type="text/javascript" src="extjs/ext-base.js"></script>-->

        <script type="text/javascript" src="extjs/ext-all.js"></script>

        <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script>

        <script type="text/javascript">

            Ext.onReady(function(){

                Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

                var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]';

                var oTabs = eval('(' + strTabs + ')');

                if (oTabs != null && oTabs.length > 0) {

                    document.getElementById("frmContent").src = oTabs[0].url;

                    var tabs = new Ext.TabPanel({

                        renderTo: 'tabsContent',

                        activeTab: 0,

                        collapsed: true,

                        items: [{

                            id: oTabs[0].id,

                            title: oTabs[0].text,

                            contentEl: 'tabItem'

                        }]

                    });

                    for (var j = 1; j < oTabs.length; j++) {

                        var oItem = {};

                        oItem.id = oTabs[j].id;

                        oItem.title = oTabs[j].text;

                        oItem.contentEl = 'tabItem';

                        tabs.add(oItem);

                    }

                    tabs.addListener("tabchange", function(tabs, nowtab){

                        for (var s = 0; s < oTabs.length; s++) {

                            if (oTabs[s].id == nowtab.id) {

                                document.getElementById("frmContent").src = oTabs[s].url;

                                break;

                            }

                        }

                    });

                }

                else {

                    document.getElementById("tabsContent").style.display = "none";

                }

            });

        </script>

    </HEAD>

    <BODY>

        <div id="tabsContent" style="margin-top: 2px;">

            <div id="tabItem" style="width: 0px; height: 0px;">

            </div>

        </div>

        <div id="tabItemsRender" style="height: 640px; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: #8DB2E3; border-right-style: solid; border-right-width: 1px; border-right-color: #8DB2E3; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #8DB2E3;">

            <iframe id="frmContent" name="frmContent" src="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%">

            </iframe>

        </div>

    </BODY>

</HTML>

ExtJS创建选项卡的更多相关文章

  1. Extjs TabPanel 选项卡延迟加载

    Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...

  2. EasyUI创建选项卡并判断是否打开

    //创建选项卡:判断选项卡是否打开,如果以打开则定位到选项卡,否则创建 function addPanel(title) { var bol = $('#main_tabs').tabs('exist ...

  3. MFC 创建选项卡

    1.创建三个选项卡Dialog窗体,ID分别改为porpTest1.porpTest2.porpTest3 2.创建三个选项卡类,类名分别为CPropTest1.CPropTest2.CPropTes ...

  4. extJS 创建类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. ExtJs创建环境搭建

    开发工具Eclipse/MyEclipse. 工具下载:http://pan.baidu.com/s/1sjmiFMH(提供spket和sdk.jsb3,   extjs-4.1.1需自己下载) 1. ...

  6. ExtJS 创建动态加载树

    Ext 中导航树的创建有两种方式:1.首先将所有的数据读出来,然后绑定到前台页面.2.每点击一个节点展开后加载子节点.在数据量比较小的时候使用第一种方式加载的会快一些,然而当数据量比较大的时候,我还是 ...

  7. ionic3创建选项卡

    html页面 <ion-content padding> <ion-segment [(ngModel)]="tabs"> <ion-segment- ...

  8. JS,Jquery,ExtJs不同脚本动态创建DOM对象

    好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...

  9. ExtJs Tree加载选项卡，选项卡加载页面不用iframe

    点击树节点,自动加载选项卡对应的页面, 效果图: JS Code: 一.创建TreeStore var store = Ext.create('Ext.data.TreeStore', { root: ...

随机推荐

  1. 阿里百川码力APP监控 来了！

    阿里百川码力APP监控  来了!这个APP监控 和手淘一起成长历经千锤百炼 走过千BUG万坑如今百川起产品   为了让你的APP更好 用户更爽! 在移动互联网时代,一款应用是否成功,用户体验是一个关键 ...

  2. 2016-2017-2 20155309南皓芯《java程序设计》第九周学习总结

    教材内容介绍 一 JDBC简介 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行操作,开发人员无须接触底层数据库驱动程序的差异性 JDBC标准分为两个部分:J ...

  3. HttpService与WebService的差异

    httpservice通过post和get得到你想要的东西webservice就是使用soap协议得到你想要的东西,相比httpservice能处理些更加复杂的数据类型 当你要调用一个你本服务的内容的 ...

  4. Kafka（五）Kafka的API操作和拦截器

    一 kafka的API操作 1.1 环境准备 1)在eclipse中创建一个java工程 2)在工程的根目录创建一个lib文件夹 3)解压kafka安装包,将安装包libs目录下的jar包拷贝到工程的 ...

  5. swift中Double转String

    swift上手有好几天了.发现swift除了本身的几个基本类型转换,一些比较特殊的数值类型转换需要“桥接”到Objective-C来进行- 代码当然也很简单- var numString = &quo ...

  6. 【51nod】1564 区间的价值

    题解 这个要注意到一个长度大的区间的最大价值一定比长度小的区间的价值要大 然后我们以每个点为最小值,显然区间越长最大值越大,然后我们更新最大区间长度的取值,这个可以用单调栈求这个最小值能更新到的左右端 ...

  7. CentOS 升级Python3.X和pip3

    目的:实现python3 and python2 共存,pip2 and pip3共存 一.安装依赖 yum install openssl-devel -y yum install zlib-dev ...

  8. Tensorflow入门（安装）

    TensorFlow是将复杂的数据结构传输至人工智能神经网中进行分析和处理过程的系统.主要用于深度学习(神经网络)方面的研究与应用.Tensorflow适用与Python.C++.Java,本博客中主 ...

  9. [CodeForces - 678F] Lena and Queries 线段树维护凸包

    大致题意: 给出三种操作 1.往平面点集中添加一个点 2.删除第i次添加的点 3.给出一个q,询问平面点集中的q*x+y的最大值 首先对于每个询问,可将z=q*x+y转化为y=z-q*x,即过点(x, ...

  10. 八皇后II

    用一个数组state记录已经选择的每一行皇后所在的位置,DFS count = 0 N = 8 state = [0]*N def dfs(row): global count for col in ...