extjs 選項卡

時間 2019-11-20
標籤 extjs 選項简体版
原文原文鏈接
yufenghou
extjs 選項卡
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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 runat="server">
    <title>Ext.toolbar.Toolbar工具欄</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
     <script type="text/javascript" defer> 
        Ext.onReady(function()
        {
            //建立一個面板
            var tabs = new Ext.TabPanel({
            renderTo: 'hello',//放置到hello上面
            width:450,//寬度爲450
            //height:200,
            activeTab: 0,
            frame:true,//帶有框架
            
            defaults:{autoHeight: true},//自動調節高度
            items:[
                {contentEl:'script', title: '子面板1'},//顯示的內容是是script的內容
                {contentEl:'markup', title: '子面板2'}//顯示的內容是markupdiv的內容
            ]
            
            });
             
             
            //在建立一個面板
            var tabs2 = new Ext.TabPanel({
            renderTo: document.body,//放到body上面
            activeTab: 0,
            width:600,//寬度
            height:250,//高度
            plain:true,
            defaults:{autoScroll: true},//滑動
            items:[{
                    title: 'Normal Tab',
                    html: "My content was added during construction."//顯示文本
                },{
                    title: 'Ajax Tab 1',
                    autoLoad:'ajax1.htm'//載入一個網頁
                },{
                    title: 'Ajax Tab 2',
                    autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}//載入一個帶參數的網頁
                },{
                    title: 'Event Tab',
                    listeners: {activate: handleActivate},//若是這個選項卡被選中那麼出發一個事件
                    html: "I am tab 4's content. I also have an event listener attached."
                },{
                    title: 'Disabled Tab',
                    disabled:true,//設置爲不可見
                    html: "Can't see me cause I'm disabled"
                }
            ]
            });
        
            function handleActivate(tab)
            {
                alert(tab.title + ' was activated.');
            }
        });              
    </script> 
     
</head>
<body>
        <div id="hello">
            
        </div>
         <div id="script" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/><br/> Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
        </div>
        <div id="markup" class="x-hide-display">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>
        </div>
        <br>
</body>
 
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。