解决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. c++ for_each( )学习

    for_each()事实上是個 function template,其实质如下  [effective STL item 41] template<typename InputIterator, ...

  2. 通过navigator.userAgent判断浏览器类型

    1.navigator.userAgent返回一个浏览器信息字符串. 2.用到indexOf()方法,查找字符串中是否有指定的浏览器类型. 3. if(navigator.userAgent.inde ...

  3. nginx虚拟主机配置和反向代理

    虚拟主机有三种配置方式(常用于本机测试使用,将一个ip和端口的请求根据域名不同分配到不同的应用服务器) 基于ip 不常用 基于端口 可选 基于域名 可选 #user nobody; worker_pr ...

  4. 60、Docker 学习笔记（CentOS 7.1）

    #基本概念 -x86_64-minimal.tar.gz | docker import - centos:v7.mini``` 然后查看导入的镜像: ##上传镜像 >用户可以通过 docker ...

  5. windows无法通过installer安装SVN

    1.当你的电脑是windows xp操作系统的时候在安装TortoiseSVN1.8**版本的时候会出现如下问题造成不能完成安装: 出现“无法通过windowsinstaller服务安装此安装程序包. ...

  6. ASP.NET那点不为人知的事（一）

    http://www.cnblogs.com/OceanEyes/archive/2012/08/13/aspnetEssential-1.html#_label0 我们上网时,在浏览器地址输入网址: ...

  7. WinRAR(WinZip)压缩与解压实现（C#版Window平台）

    本文的原理是借助Windows平台安装的WinRAR(WinZip)实现C#程序的调用(注:WinRAR压缩解压WinZip同样适用). 先来看WinRAR(WinZip)自身的支持调用命令: 压缩命 ...

  8. cf914F. Substrings in a String(bitset 字符串匹配)

    题意 题目链接 Sol Orz jry 和上一个题一个思路吧,直接bitset乱搞,不同的是这次有了修改操作 因为每次修改只会改两个位置,直接暴力改就好了 #include<bits/stdc+ ...

  9. better-scroll 遇到的问题 1

    备注:better-scroll 实现下拉,是父子层的结构,父层的第一个子元素,如果超出父容器,那么就可以实现下拉 问题:  今天在使用better-scroll实现下拉功能,遇到了一个问题 &quo ...

  10. Vue.js双向数据绑定模板渲染

    准备知识 1. 前端开发基础 html.css.js2. 前端模块化基础3. 对ES6有初步的了解 vuejs官网:cn.vuejs.org HTML: <!DOCTYPE html> & ...