ExtJS创建选项卡 

<!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>

 

posted @ 2013-08-22 15:50  残星  阅读(1922)  评论(0)  编辑  收藏  举报