解决tabPosition:left 标签的方向问题
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3.     String path = request.getContextPath();
  4.     String basePath = request.getScheme() + "://"
  5.             + request.getServerName() + ":" + request.getServerPort()
  6.             + path + "/";
  7. %>
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9. <html>
  10.     <head>
  11.         <title>測試</title>
  12.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  13.         <script type="text/javascript" src="/app/ext-4.2.1/ext-all.js"></script>
  14.         <script type="text/javascript" src="/app/ext-4.2.1/ext-lang-zh_CN.js"></script>
  15.         <link rel="stylesheet" type="text/css" href="/app/ext-4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css" />
  16.  
  17.         <style type="text/css">
  18.             .verticaltab .x-tab-wrap {
  19.                 position: absolute;
  20.                 display: block;
  21.                 padding-left: 20px;
  22.                 transform: rotate(90deg);
  23.             }
  24.  
  25.             .verticaltab .x-tab-button {
  26.                 position: absolute;
  27.                 display: block;
  28.                 padding-left: 0px;
  29.                 padding-top: 2px;
  30.             }
  31.  
  32.         </style>
  33.         <script type="text/javascript">
  34.         Ext.onReady(function(){
  35.         Ext.define('VerticalPanel', {
  36.             extend : 'Ext.tab.Panel',
  37.             cls : 'verticaltab',
  38.             // 添加tabbar,修改 背景的宽度
  39.             tabBar : {
  40.                 width : 100,
  41.                 minTabWidth : 100,
  42.                 maxTabWidth : 100,
  43.                 height : 15,
  44.                 orientation : 'vertical'
  45.             },
  46.  
  47.             tabPosition : 'left',// 竖形排列
  48.             width : '100%',
  49.             height : 300,
  50.             enableTabScroll : true,
  51.             activeTab : 0,
  52.             items : [ {
  53.                 title : 'panel01',
  54.                 html : '11111'
  55.             }, {
  56.                 title : 'panel02',
  57.                 html : '2222222'
  58.             }, {
  59.                 title : 'panel03',
  60.                 html : '333333333'
  61.             } ]
  62.         });
  63.                 var p = Ext.create('VerticalPanel');
  64.                 p.render('content');
  65.             });
  66.         </script>
  67.     </head>
  68.     <body>
  69.         <div id="content"></div>
  70.     </body>
  71. </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. VC6.0开发中一些链接错误的解决方法

    (1)error LNK2001: unresolved external symbol _main 编号:LNK2001 直译:未解决的外部符号:_main. 错误分析:缺少main函数.看看mai ...

  2. hadoop和spark比较

    http://blog.51cto.com/13943588/2165946 3.hadoop和spark的都是并行计算,那么他们有什么相同和区别?  两者都是用mr模型来进行并行计算,hadoop的 ...

  3. eclipse decompiler

    # eclipse -> help -> eclipse marketplace # decompiler

  4. Python + Selenium 练习篇 - 获取页面所有邮箱

    代码如下: # coding=utf-8import re    #python中利用正则,需要导入re模块from selenium import webdriverdriver = webdriv ...

  5. Java基础04-数据的输入

    1.为什么要有数据的输入? 实现人机进行交互 2.什么是数据的输入? 利用扫描仪Scanner进行数据输入 3.怎么使用扫描仪Scanner? (1)放在类声明之前,引入扫描仪 import java ...

  6. 安卓压力测试之monkey

    步骤: 1.把要测试的apk包放在 SDK-platfrom-tools下 2.配置adb.exe的环境变量 3.手机连接上电脑(虚拟机和真机只能连接一个) 4.运行:adb devices   查看 ...

  7. 牛客网Java刷题知识点之File对象常用功能：获取文件名称、获取文件路径、获取文件大小、获取文件修改时间、创建与删除、判断、重命名、查看系统根目录、容量获取、获取某个目录下内容、过滤器

    不多说,直接上干货! 获取文件名称.获取文件路径.获取文件大小.获取文件修改时间 FileMethodDemo.java package zhouls.bigdata.DataFeatureSelec ...

  8. POJ 1861 ——Network——————【最小瓶颈生成树】

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 15268   Accepted: 5987   Specia ...

  9. 二维码项目实例为二维码添加logo

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

  10. code first关系表达

    1.一对多关系 [Table("classInfo")] public class ClassInfo { public int Id { get; set; } public s ...