ext中使用iframe的tabs页

来源：互联网发布：安卓软件开发入门编辑：程序博客网时间：2024/06/14 07:21

转自：http://www.blogjava.net/wangbing/archive/2009/06/16/282715.html

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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

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

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

    



</head>
<body>
<script>
Ext.onReady(function(){
    function func_loadTab1(){
        window.frames['tab1-frame'].location = 'ajax3.htm';
    }
    var queryForm = new Ext.form.FormPanel({
        title:'query form',
        region:'west',
        width:150,
        items:[{fiedLabel:'username'}],
        buttons:[{text:'auto load1',handler:func_loadTab1}]
    });
    var tabs = new Ext.TabPanel({
        activeTab: 0,
        region:'center',
        width:600,
        height:250,
        plain:true,
        defaults:{autoScroll: true},
        items:[{
            id:'tab1',
            name:'tab1',
             title: 'Ajax Tab 1',
             html:'<iframe scrolling="auto" name="tab1-frame" frameborder="0" width="100%" height="100%" src="ajax1.htm"></iframe>'
        },{
             title: 'Ajax Tab 2',
            html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="ajax2.htm"></iframe>'
        }]
    });

    var viewport = new Ext.Viewport({
         layout:'border',
         items:[queryForm,tabs]
    });
});

</script>

</body>
</html>