解决tabPosition:left 标签的方向问题
 
<%@ 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 HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>測試</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

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

        <script type="text/javascript" src="/app/ext-4.2.1/ext-lang-zh_CN.js"></script>

        <link rel="stylesheet" type="text/css" href="/app/ext-4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css" />

        <style type="text/css">

            .verticaltab .x-tab-wrap {

                position: absolute;

                display: block;

                padding-left: 20px;

                transform: rotate(90deg);

            }

            .verticaltab .x-tab-button {

                position: absolute;

                display: block;

                padding-left: 0px;

                padding-top: 2px;

            }

        </style>

        <script type="text/javascript">

        Ext.onReady(function(){

        Ext.define('VerticalPanel', {

            extend : 'Ext.tab.Panel',

            cls : 'verticaltab',

            // 添加tabbar,修改 背景的宽度

            tabBar : {

                width : 100,

                minTabWidth : 100,

                maxTabWidth : 100,

                height : 15,

                orientation : 'vertical'

            },

            tabPosition : 'left',// 竖形排列

            width : '100%',

            height : 300,

            enableTabScroll : true,

            activeTab : 0,

            items : [ {

                title : 'panel01',

                html : '11111'

            }, {

                title : 'panel02',

                html : '2222222'

            }, {

                title : 'panel03',

                html : '333333333'

            } ]

        });

                var p = Ext.create('VerticalPanel');

                p.render('content');

            });

        </script>

    </head>

    <body>

        <div id="content"></div>

    </body>

</html>

Extjs4.2 tabPosition left 相关的更多相关文章

  1. extjs4学习-02-导入相关文件

    在WebContent下创建extjs4目录. 将extjs项目文件中的resource文件夹和ext-all.js.ext-all.js.ext-all-debug.js文件拷贝进去.

  2. 嵌入式单片机STM32应用技术（课本）

    目录SAIU R20 1 6 第1页第1 章. 初识STM32..................................................................... ...

  3. ExtJs4 笔记（4） Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  4. ExtJS4.2.1自定义主题（theme）样式详解

    (基于Ext JS 4.2.1版本) UI组件 学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. Ex ...

  5. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  6. Extjs-4.2.1（一）——编辑 hello word

    前言:在搭建好环境后,就可以利用Extjs进行开发了. 一.在项目中拷贝相关的Extjs文件,如下图: 注意:不需要整个Ext开发包全部导入,这样很容易造成eclipse卡死,因为eclipse会自动 ...

  7. Extjs4学习

    1 Ext js初步 1.1 获取Extjs 下载extjs: 可以从http://extjs.org.cn/ 获得需要的extjs发布包及更多支持. 1.2 搭建学习环境: 假设您的机器已经安装my ...

  8. ExtJS4.2.1

    ExtJS4.2.1 1. 介绍 1.1 说明 ExtJS是一个用javascript.CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架. 常用于企业内部管 ...

  9. Extjs4.0.7 实现Grid的嵌套

    网上相关资料非常少,我看过的大多是Extjs 3.0 急以前版本的解决方案. 比如:http://mikhailstadnik.com/ext/examples/nested-grid.htm  (E ...

随机推荐

  1. SQL Server 如何更改SQL Server和windows身份方式验证

    1.安装sql后先用windows账户登陆进去,然后在sql上右键,选择“安全性”-“SQL Server和windows身份验证模式”然后确定 2.找到安全性——登陆名(sa用户)右键——状态,在登 ...

  2. Murano Weekly Meeting 2015.09.08

    Meeting time: 2015.September.8th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting su ...

  3. Eclipse中引来的jar包乱码

    Eclipse中引入的jar包乱码jar包链接的源码,中文注释为乱码的解决方法: 1.将Eclipse的Preferences中的General>ContentTypes中的Java Class ...

  4. stm32 PWM输出学习

    STM32 的定时器除了 TIM6 和 7,其他的定时器都可以用来产生 PWM 输出.其中高级定时器 TIM1 和 TIM8 可以同时产生多达 7 路的 PWM 输出.通用定时器也能同时产生多达 4路 ...

  5. Unable to run man pages on Centos 6

    I just installed CentOS 6 with minimal install. When i tried to read the linux manual pages using ma ...

  6. C#使用进度条，并用线程模拟真实数据 ProgressBar用法（转）

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. sqlmap 命令详解（自备速查）

    sqlmap速查 /pentest/database/sqlmap/txt/ common-columns.txt 字段字典 common-outputs.txt common-tables.txt ...

  8. （开发）ESLint - 代码规范

    参考文档:http://eslint.cn/ ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误.在许多方面,它和 J ...

  9. Swift中as as! as?的区别

     as  :类型一致或者子类 仅当一个值的类型在运行时(runtime)和as模式右边的指定类型一致 - 或者是该类型的子类 - 的情况下,才会匹配这个值.如果匹配成功,被匹配的值的类型被转换成as模 ...

  10. appium （五）desired_caps参数

     转自:http://blog.csdn.net/Yejianyun1/article/details/56279051   一.介绍 在appium server 与手机端建立会话关系时,手机端需要 ...