解决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. java lamda

    // 查询数据模拟 List<SealListViewVo> list = new ArrayList<SealListViewVo>(); for (int i = 0; i ...

  2. 性能测试工具LoadRunner28-LR之内部数据参数类型

    Date/Time 在“Parameter type”中您可以选择Date/Time,即:用当前的日期/时间替换参数.要指定日期/时间的格式,可以从格式列表中选择一个格式,或者指定您自己的格式. [l ...

  3. adb root错误信息adbd cannot run as root in production builds问题解决

    adb root错误信息adbd cannot run as root in production builds问题解决 一．问题描述 1.输入指令 >adb root adbd cannot ...

  4. node+mongoDB+express项目需求解释

    1. morgon模块 --- morgon 用于打印日志,分别为向后台打印和向文件中打印两种情况.stackoverflow. 2. app.use(bodyParser.json()) 3. de ...

  5. PHPcms的安装步骤

    http://www.phpcms.cn 制作良好习惯: 1.备份 2.随时保存 3.注释 在自己的PHP环境里 简历一个文件夹 比如命名为YiNong 访问安装地址,http://localhost ...

  6. StringMVC入门案例

    1.首先要引入jar包 <!--引入beans节点--> <dependency> <groupId>org.springframework</groupId ...

  7. IntelliJ IDEA实时模板变量

    返回由当前方法返回的值的类型IntelliJ IDEA 实时模板中的模板变量允许用户输入.扩展模板后,变量将作为输入字段显示在编辑器中. IntelliJ IDEA 声明实时模板变量 模板中的变量以下 ...

  8. css 引入方式以及css的选择器

    一.css的引入方式: 1.行内样式 <div> <p style="color: red">我是一个段落</p> </div> 2 ...

  9. SASS简介及使用方法

    一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...

  10. baidu-aip-SDK node.js 身份证识别

    最近项目中客户需要实现身份证识别功能,合理计划了之后决定使用百度ai的身份证识别. 身份证识别是文字识别的一种,类似的功能有很多比如驾驶证识别等等,原理都是相同的. 对于前端初学者来说,如果要实现这种 ...