解决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. 分布式思想和rpc解决方案介绍

    1.RPC的诞生 RPC(Remote Procedure Call)远程过程调用,通过这个rpc协议,调用远程计算机上的服务,就像调用本地的服务一样. 不同的服务部署在不同的机器上面,并且在启动后在 ...

  2. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...

  3. instancemethod, staticmethod, classmethod & abstractmethod

    实例方法.静态方法.类方法.抽象方法 1.  Python中方法的工作方式(How methods work in Python) A method is a function that is sto ...

  4. pat1019. General Palindromic Number (20)

    1019. General Palindromic Number (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...

  5. 深入理解.net remoting 与webservice

    1. .NET Remoting .NET Remoting是微软随.NET推出的一种分布式应用解决方案,被誉为管理应用程序域之间的 RPC 的首选技,它允许不同应用程序域之间进行通信(这里的通信可以 ...

  6. 转：MVC中的文件上传

    上传文件与与上传数据区别 上传数据主要指json等简单字符串,上传文件指的是上传word.excel图片等.在上传数据的时候enctype默认为第一个application/x-www-form-ur ...

  7. C# 一些零零碎碎的方法，都是些帮助类，留存，也希望能帮助到各位

    ---------------------------------------------------------------------------------------------------- ...

  8. IsBackground对线程的重要作用

    要点: 1.当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALSE的. 2.当主线程退出的时候,IsBackground=FALSE的线程还会继续执行下去,直到线程执行 ...

  9. php赋值运算符

    = 赋值 += $x+=3相当于$x = $x+3; -= *= /+ %= .=

  10. 从零开始的全栈工程师——js篇（闭包）

    闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会 ...