解决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. Maven导入jar包

    可在该网址查找:http://search.maven.org/#search%7Cga%7C1%7Cjunit

  2. LitJson（读Exce文件写入到json文件）：

    读Exce文件写入到json文件汇总: //命名空间 using System.Collections; using System.Collections.Generic; using System. ...

  3. (转)总结Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  4. zepto.js常用操作

    zepto.js是移动端的jquery,但是并没有提供所有与jquery类似的api.Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要的精力放到 ...

  5. jQuery的实现编码，解决特殊字符 <script> "

    function htmlEncode(value){ if (value) { return jQuery('<div />').text(value).html(); } else { ...

  6. Java中的阻塞队列-ArrayBlockingQueue（一）

    最近在看一些java基础的东西,看到了队列这章,打算对复习的一些知识点做一个笔记,也算是对自己思路的一个整理,本章先聊聊java中的阻塞队列 参考文章: http://ifeve.com/java-b ...

  7. 数据库navicat中limit函数的用法

    从t_product表中获取pic_small字段的前十条记录 示例:select pic_small from t_product limit 0,10;

  8. JS判断web网站访问端是PC电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! <script type="text/javascript"> <!-- //平台.设备和操 ...

  9. LOJ#137. 最小瓶颈路 加强版(Kruskal重构树 rmq求LCA)

    题意 三倍经验哇咔咔 #137. 最小瓶颈路 加强版 #6021. 「from CommonAnts」寻找 LCR #136. 最小瓶颈路 Sol 首先可以证明,两点之间边权最大值最小的路径一定是在最 ...

  10. POS开发问题 - 输入非数字弹出提示框的实现

    业务场景: 一个输入框,如果输入非数字,那么弹出提示框,如下图 点击确定,输入框自动清空非数字的输入,并且自动获得焦点,如图: 实现方案: 实现的想法: 给输入框添加一个 input 事件,给输入框绑 ...