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>

extjs 选项卡的更多相关文章

  1. Extjs TabPanel 选项卡延迟加载

    Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...

  2. ExtJS创建选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ExtJs Tree加载选项卡，选项卡加载页面不用iframe

    点击树节点,自动加载选项卡对应的页面, 效果图: JS Code: 一.创建TreeStore var store = Ext.create('Ext.data.TreeStore', { root: ...

  4. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  5. [转载]ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  6. ExtJS控件样式修改及美化

    Extjs项目对富客户端开发提供了强有力的支持,甚至改变了前端的开发方式,使得开发变得更加趋向于“面向组件”.对界面的美化而言,也是根本性的改变.普通的网页美工面对extjs项目根本无法下手,需要脚本 ...

  7. ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    本篇讲解选项卡控件. 一.基本选项卡 首先我们来定义一个基本的选项卡控件,其中每个Tab各有不同,Tab的正文内容可以有三种方式获取: 1.基本方式:通过定义html和items的方式. 2.读取其他 ...

  8. Javascript框架 - ExtJs - 类

    类(ExtJs Class) preparation! 我用的是ext-4.2,解压后会得到以下文件 学习要用到的文件很少,现在保留以下文件和整个文件夹,然后删除其它文件并保持目录结构.本页面底部有提 ...

  9. ExtJS Tab里放Grid高度自适应问题，官方Perfect方案。

    出处:http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layouts/combination.js // ...

随机推荐

  1. GraphicsMagick为图片添加水印

    GraphicsMagick号称图像处理领域的瑞士军刀.提供了健壮及高效的图像处理工具包和库,支持超过88种主流图片格式包括:BMP,GIF,JPEG,JPEG-2000,PNG,PDF,PNM,TI ...

  2. 【Python】Django 支持 restful 风格 url

    URL通配符示例: url(r'^file_download/(?P<filename>(.)*)$', views.FILE_DOWNLOAD_VIEW.as_view()), 代码示例 ...

  3. location 、history

    location.href= location.reload() history.go()  0   1  -1 history.back() history.forward() history.le ...

  4. MySQL入门书籍和方法分享

    本文罗列了一些适用于MySQL及运维入门和进阶使用的书籍. 背景:各大论坛上总是有很多同学咨询想学习数据库,或者是为入行DBA做些准备.几年来作为一个MySQL DBA的成长过程有一些积累和感悟,特此 ...

  5. mysql show

    1.show命令语法 SHOW {BINARY | MASTER} LOGS SHOW BINLOG EVENTS [IN 'log_name'] [FROM pos] [LIMIT [offset, ...

  6. DP:Apple Catching(POJ 2385)

    牛如何吃苹果 问题大意:一个叫Bessie的牛,可以吃苹果,然后有两棵树,树上苹果每分钟会掉一个,这只牛一分钟可以在两棵树中往返吃苹果(且不吃地上的),然后折返只能是有限次W,问你这只叫Bessie的 ...

  7. NEFU 1142 表哥的面包

    表哥的面包 Problem:1142 Time Limit:1000ms Memory Limit:65535K Description 可爱的表哥遇到了一个问题,有一个长为N(1≤N≤10^18)的 ...

  8. javascript输出AscII码扩展集中的字符

    function test(){ var c=""; for(var i=1;i<65536;i++){ if((i%10)==0){ c+=i+':\t'+String.f ...

  9. 队列——解密QQ号

    队列——解密QQ号 --转自啊哈磊[坐在马桶上看算法]算法4:队列——解密QQ号 新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问QQ号,小哈当然不会直接告诉小哼啦,原因嘛你懂的 ...

  10. （五）转载：通用定时器PWM输出

    1.     TIMER输出PWM基本概念 脉冲宽度调制(PWM),是英文“Pulse Width Modulation”的缩写,简称脉宽调制,是利用微处理器的数字输出来对模拟电路进行控制的一种非常有 ...