extjs学习二TabPanel -

AbstractForever

浏览: 307887 次
性别:
来自: 成都

最近访客更多访客>>

piao2004

weich_java

2019ben123

sunshine2651

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

extjs学习二TabPanel

博客分类：

EXT CSS JavaScript JSP HTML

tab面板是布局中用的比较多的。

引入ext必须的3个文件：

<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>

tab.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>
 
<link rel="stylesheet" type="text/css" href="ux/css/TabScrollerMenu.css" />
<script type="text/javascript" src="tab.js"></script>

</head>
<body>

</body>
</html>

tab.js:

Ext.Loader.setConfig({
    enabled: true
});
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.onReady(function(){
    var tabscrollermenu = Ext.create('Ext.ux.TabScrollerMenu', {
        ptype: 'tabscrollermenu',
        maxText: 15,
        pageSize: 10
    });
    
    var tabs = Ext.create('Ext.tab.Panel', {
        title: '选项卡面板b',
        width: 400,
        height: 300,
        collapsible: true,
        activeTab: 0,
        plugins: [tabscrollermenu],
        items: [{
            itemId: 'index1',
            title: '选项卡 11',
            closable: true,
            autoLoad: {
                url: 'tabFrame.jsp?url=index1.html'
            }
        }, {
            title: '选项卡2',
            closable: true,
            autoLoad: {
                url: 'tabFrame.jsp?url=index2.html'
            }
        }],
        renderTo: Ext.getBody()
    });
    Ext.create('Ext.button.Button', {
        text: '添加选项卡',
        scope: this,
        handler: function(){
            var tab = tabs.add({
                title: '选项卡' + (tabs.items.length + 1),
                closable: true,
                autoLoad: {
                    url: 'tabFrame.jsp?url=index2.html'
                }
            });
            tabs.setActiveTab(tab);
        },
        renderTo: Ext.getBody()
    });
    Ext.create('Ext.button.Button', {
        text: '删除选项卡',
        scope: this,
        handler: function(){
            var tab = tabs.getActiveTab();
            tabs.remove(tab);
        },
        renderTo: Ext.getBody()
    });
});

ux在examples下面可以找到。

index1.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <title>Insert title here</title>
        <script type="text/javascript">
            function show(){
                var val = document.getElementById("txtIndex").value;
                alert(val);
            }
        </script>
    </head>
    <body>
        index1页面<input id="txtIndex" type="text" value="abab"/><input type="button" value="显示" onclick="show()"/>
    </body>
</html>

index2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <title>Insert title here</title>
        <script type="text/javascript">
            function show(){
                var val = document.getElementById("txtIndex").value;
                alert(val);
            }
        </script>
    </head>
    <body>
        index2页面<input id="txtIndex" type="text" value="index2"/><input type="button" value="显示" onclick="show()"/>
    </body>
</html>

tabFrame.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<iframe src="<%=request.getParameter("url") %>" width="100%" height="100%" frameborder="0"></iframe>

效果如图：