ext TabPanel学习(1)

smile_wlxt

于 2013-07-25 16:51:57 发布

阅读量114

点赞数

分类专栏： Ext 学习文章标签： ext TabPanel taposition tabtip iframe

本文链接：https://blog.csdn.net/smile_wlxt/article/details/84462661

版权

Ext 学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：

[img]http://dl2.iteye.com/upload/attachment/0087/3572/9a8554ae-eae1-31e2-b66c-75648863e966.png[/img]

js代码：
Ext.onReady(function(){
    var tabDemo = new Ext.TabPanel({
        renderTo:Ext.getBody(),
        width:300,
        activeTab:0,//当前激活标签
        frame:true,
        closable:true,
        items:[{
                contentEl:'tabOne',//标签页的页面元素id
                title:'嘎嘎',
                closable:true//是否实现关闭按钮，默认false

            },{
                contentEl:'tabTwo',
                title:'你们好啊，小伙伴们',
                closable:true,
            }]
    })
})
html代码：
<body>
    <div>
        <div id="tabOne" class="x-hide-display">我是tabOne</div>
        <div id="tabTwo" class="x-hide-display">我是tabTwo</div>
    </div>
</body>


//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果

在一个选项卡中加载一个完整页面
使用iframe作为tab的标签页内容
效果图：

[img]http://dl2.iteye.com/upload/attachment/0087/3598/ee219b8a-d77e-3696-9b9f-72f91a572af1.png[/img]
点击连接-->"我的博客"

[img]http://dl2.iteye.com/upload/attachment/0087/3600/3545ee5e-9c46-3fb7-9a12-4732da0c9cc5.png[/img]

js代码如下：

Ext.onReady(function(){
    Ext.QuickTips.init();
    var tabDemo = new Ext.TabPanel({
        renderTo:Ext.getBody(),
        activeTab:0,
        height:700,//当用viewport布局时，height可以省去
        frame:true,
        items:[{
                contentEl:'mainFrame',
                title:'加载页面的标签页',
                closable:true
            }]
    })
})
html代码如下：
<body>
    <div>
        <a href="javascript:void(0)"
        οnclick="parent.frames['mainFrame'].location='http://wlxt-8436.iteye.com/'"
                >我的博客</a>
        <iframe id="mainFrame" name="mainFrame" src="http://www.163.com/"
                    frameborder='0' height='100%'
                width="100%" style="overflow:hidden"></iframe>
    </div>
</body>