http://ext4all.com/post/a-little-bit-strange-navigation

效果图：

 app/view/Viewport.js

  1. Ext.define('App.view.Viewport', {
  2.     extend: 'Ext.container.Viewport',
  3.     layout: 'border',
  4.     items: [
  5.         {
  6.             itemId: 'menu',
  7.             region: 'west',
  8.             collapsible: true,
  9.             title: 'Menu',
  10.             width: 200,
  11.             items: [
  12.                 {
  13.                     xtype: 'panel',
  14.                     height: 110,
  15.                     padding: '10 10 25 10',
  16.                     width: 200,
  17.                     collapsible: true,
  18.                     title: 'Company Information',
  19.                     items: [
  20.                         {
  21.                             xtype: 'button',
  22.                             height: 27,
  23.                             style: 'margin-left:30px;margin-top:12px;\n',
  24.                             width: 128,
  25.                             text: 'Company',
  26.                             action: 'company-view'
  27.                         }
  28.                     ]
  29.                 },
  30.                 {
  31.                     xtype: 'panel',
  32.                     height: 110,
  33.                     padding: '10 10 25 10',
  34.                     width: 200,
  35.                     collapsible: true,
  36.                     title: 'Department Information',
  37.                     items: [
  38.                         {
  39.                             xtype: 'button',
  40.                             height: 27,
  41.                             style: 'margin-left:30px;margin-top:12px;\n',
  42.                             width: 128,
  43.                             text: 'Department',
  44.                             action: 'department-view'
  45.                         }
  46.                     ]
  47.                 },
  48.                 {
  49.                     xtype: 'panel',
  50.                     height: 110,
  51.                     padding: '10 10 25 10',
  52.                     width: 200,
  53.                     collapsible: true,
  54.                     title: 'Designation Information',
  55.                     items: [
  56.                         {
  57.                             xtype: 'button',
  58.                             height: 27,
  59.                             style: 'margin-left:30px;margin-top:12px;',
  60.                             width: 128,
  61.                             text: 'Designation',
  62.                             action: 'designation-view'
  63.                         }
  64.                     ]
  65.                 }
  66.             ],
  67.             margins: '5 0 5 5'
  68.         },
  69.         {
  70.             itemId: 'cards',
  71.             region: 'center',
  72.             margins: '5 5 5 5',
  73.             border: false,
  74.             layout: 'card',
  75.             defaults: { bodyPadding: 10 },
  76.             items: [
  77.                 {
  78.                     title: 'Company Information',
  79.                     itemId: 'company-view',
  80.                     html: 'Company Information Details'
  81.                 },
  82.                 {
  83.                     title: 'Department Information',
  84.                     itemId: 'department-view',
  85.                     html: 'Department Information Details'
  86.                 },
  87.                 {
  88.                     title: 'Designation Information',
  89.                     itemId: 'designation-view',
  90.                     html: 'Designation Information Details'
  91.                 }
  92.             ]
  93.         }
  94.     ]
  95. });

 app/controller/Main.js

  1. Ext.define('App.controller.Main', {
  2.     extend: 'Ext.app.Controller',
  3.     refs: [ //配置要建立对页面上的视图的引用的数组
  4.         {
  5.             ref: 'cards',//名称的引用
  6.             selector: 'viewport > #cards' //Ext.ComponentQuery 查找组件
  7.         }
  8.     ],
  9.     init: function () {
  10.         this.control({
  11.             'viewport > #menu button': {
  12.                 click: function (button) {
  13.                     this.getCards().getLayout().setActiveItem(button.action);
  14.                 }
  15.             }
  16.         });
  17.     }
  18. });

 app.js

  1. Ext.Loader.setConfig({ enabled: true });
  2.  
  3. Ext.application({
  4.     name: 'App',
  5.     appFolder: 'app',
  6.     controllers: [
  7.         'Main'
  8.     ],
  9.     autoCreateViewport: true
  10. });

 index.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title></title>
  6.     <script src="../../ext-4.0.2/bootstrap.js" type="text/javascript"></script>
  7.     <link href="../../ext-4.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  8.     <script src="app.js" type="text/javascript"></script>
  9.   
  10.  
  11. </head>
  12. <body>
  13.  
  14. </body>
  15. </html>

注意:目前发现 只有引入 ext -4.0.2的版本是没有问题。当引用了最新版本的4.2的时候 发现 左侧的 三个面板在点击面板的收缩和展开的按钮出现bug。

当时使用4.2以下的版本的时候，记得要设置 Ext.Loader.setConfig({enabled:true});

正常的左侧：

当点击收缩的时候 顶部的空白 被顶上去了

代码下载：

http://www.baidupcs.com/file/19b0658b213bde377eca2c8373a7511f?xcode=6c483924a8b184b3a757df2e01b422602fa345c4d75f8604&fid=3993055813-250528-3278538772&time=1378389260&sign=FDTAXER-DCb740ccc5511e5e8fedcff06b081203-uF536rOccbRZxHUmVHKyLwJb%2BGU%3D&to=wb&fm=N,B,T&expires=8h&rt=sh&r=818897120&logid=1027182612&sh=1

ExtJS 4 MVC Viewport和card布局的更多相关文章

  1. ExtJS 布局-Card 布局（Card layout）

    更新记录: 2022年6月1日 开始. 2022年6月6日 发布. 1.说明 卡片布局类似牌堆,每次只有一个子组件可见,子组件几乎填满了整个容器.卡片布局常用于向导(Wizard)和选项卡(Tabs) ...

  2. ExtJS 4.2 教程-08：布局系统详解

    ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...

  3. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  4. card布局解决复杂操作的布局问题

    一直不是很待见直接使用card布局,直到对于一些稍微复杂点的业务, 通过border布局和弹窗体的方式解决特别费劲之后,才想起了card布局, 发现card布局真是一个很好的解决办法. 那个使用起来很 ...

  5. ExtJS 4 MVC 创建 Viewport

    http://ext4all.com/post/extjs-4-mvc-with-viewport 效果图: 结构图: 没有用到Model层,直接在view里面写上 默认的 json的数据 中间Pan ...

  6. ExtJS 4 MVC架构讲解

    大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS 4 带来了一个新的应用架构,不但可以组织代码,还可以减少实现的内容新的应用架构 ...

  7. Extjs 6 MVC开发模式（二）

    1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将 ...

  8. Extjs 6 MVC开发模式（一）

    1.Extjs就绪函数 1)导入Extjs的CSS <link rel="stylesheet" type="text/css" href="r ...

  9. MVC学习系列5--Layout布局页和RenderSection的使用

    我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但 ...

随机推荐

  1. redis哨兵模式配置

    java对redis的读写 依赖包:jedis.jar maven下: <!-- https://mvnrepository.com/artifact/redis.clients/jedis - ...

  2. (转)Redis

    Rdis和JQuery一样是纯粹为应用而产生的,这里记录的是在CentOS 5.7上学习入门文章: 1.Redis简介 Redis是 一个key-value存储系统.和Memcached类似,但是解决 ...

  3. Web.config的system.webServer节点与system.web的区别

    Web.config 文件中的 system.webServer 节用于指定适用于 Web 应用程序的 IIS 7.0 设置.system.WebServer 是 configuration 节的子级 ...

  4. 《gis空间分析及应用案例解析》培训总结

    <gis空间分析及应用案例解析>培训总结 来源:常德水情 作者:唐校准 发布日期:2014-01-02       2013年12月2630日由中国科学院计算技术研究所教育中心组织的< ...

  5. 【C】字符串，字符和字节（C与指针第9章）

    C语言没有一种显式的数据类型是字符串的. C语言存储字符串:字符串常量(不能改动).字符数组或动态分配的内存(能够改动) *************************************** ...

  6. Dubbo应用启动与停止脚本,超具体解析

    本周刚好研究了一下dubbo的启动脚本,所以在官网的启动脚本和公司内部的启动脚本做了一个整理,弄了一份比較通过的Dubbo应用启动和停止脚本.          以下的脚本仅仅应用于配置分离的应用.什 ...

  7. Vs2012在Linux开发中的应用（5）：项目属性的定义

    VS的项目属性表实际上是由一系列的XML文件定义的,都存放在C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\2052文件夹下.我们全然能够 ...

  8. Asp.net MVC 简单分页 自做简单分页

    Asp.net MVC 简单分页:   public static string Pager(int page,int pageSize,int total)         {           ...

  9. 关于Python中正则表达式的反斜杠问题

    之前总是搞不明白正则表达式中的反斜杠的问题.今天经过查阅资料终于搞明白了. 其中最重要的一点就是Python自己的字符串中定义的反斜杠也是转义字符,而正则表达式中的反斜杠也是转义字符,所以正则表达式中 ...

  10. soapUI系列之—-02 Groovy脚本常用方法

    ------Groovy脚本常用方法 1. 设置参数值:setPropertyValuea. 设置 project level property//set to project level prope ...