ExtJS 4 MVC Viewport和card布局
http://ext4all.com/post/a-little-bit-strange-navigation
效果图：
app/view/Viewport.js
Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{
itemId: 'menu',
region: 'west',
collapsible: true,
title: 'Menu',
width: 200,
items: [
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Company Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;\n',
width: 128,
text: 'Company',
action: 'company-view'
}
]
},
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Department Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;\n',
width: 128,
text: 'Department',
action: 'department-view'
}
]
},
{
xtype: 'panel',
height: 110,
padding: '10 10 25 10',
width: 200,
collapsible: true,
title: 'Designation Information',
items: [
{
xtype: 'button',
height: 27,
style: 'margin-left:30px;margin-top:12px;',
width: 128,
text: 'Designation',
action: 'designation-view'
}
]
}
],
margins: '5 0 5 5'
},
{
itemId: 'cards',
region: 'center',
margins: '5 5 5 5',
border: false,
layout: 'card',
defaults: { bodyPadding: 10 },
items: [
{
title: 'Company Information',
itemId: 'company-view',
html: 'Company Information Details'
},
{
title: 'Department Information',
itemId: 'department-view',
html: 'Department Information Details'
},
{
title: 'Designation Information',
itemId: 'designation-view',
html: 'Designation Information Details'
}
]
}
]
});
app/controller/Main.js
Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
refs: [ //配置要建立对页面上的视图的引用的数组
{
ref: 'cards',//名称的引用
selector: 'viewport > #cards' //Ext.ComponentQuery 查找组件
}
],
init: function () {
this.control({
'viewport > #menu button': {
click: function (button) {
this.getCards().getLayout().setActiveItem(button.action);
}
}
});
}
});
app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
name: 'App',
appFolder: 'app',
controllers: [
'Main'
],
autoCreateViewport: true
});
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../ext-4.0.2/bootstrap.js" type="text/javascript"></script>
<link href="../../ext-4.0.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>
</head>
<body> </body>
</html>
注意:目前发现 只有引入 ext -4.0.2的版本是没有问题。当引用了最新版本的4.2的时候 发现 左侧的 三个面板在点击面板的收缩和展开的按钮出现bug。
当时使用4.2以下的版本的时候，记得要设置 Ext.Loader.setConfig({enabled:true});
正常的左侧：
当点击收缩的时候 顶部的空白 被顶上去了
代码下载：
ExtJS 4 MVC Viewport和card布局的更多相关文章
- ExtJS 布局-Card 布局（Card layout）
更新记录: 2022年6月1日 开始. 2022年6月6日 发布. 1.说明 卡片布局类似牌堆,每次只有一个子组件可见,子组件几乎填满了整个容器.卡片布局常用于向导(Wizard)和选项卡(Tabs) ...
- ExtJS 4.2 教程-08：布局系统详解
ExtJS 4.2 系列教程导航目录: ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程-02:bootstrap.js 工作方式 ExtJS 4.2 教程-03:使用 ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- card布局解决复杂操作的布局问题
一直不是很待见直接使用card布局,直到对于一些稍微复杂点的业务, 通过border布局和弹窗体的方式解决特别费劲之后,才想起了card布局, 发现card布局真是一个很好的解决办法. 那个使用起来很 ...
- ExtJS 4 MVC 创建 Viewport
http://ext4all.com/post/extjs-4-mvc-with-viewport 效果图: 结构图: 没有用到Model层,直接在view里面写上 默认的 json的数据 中间Pan ...
- ExtJS 4 MVC架构讲解
大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS 4 带来了一个新的应用架构,不但可以组织代码,还可以减少实现的内容新的应用架构 ...
- Extjs 6 MVC开发模式（二）
1.Extjs MVC开发模式 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs4.x版本中引入了MVC开发模式,开始将 ...
- Extjs 6 MVC开发模式（一）
1.Extjs就绪函数 1)导入Extjs的CSS <link rel="stylesheet" type="text/css" href="r ...
- MVC学习系列5--Layout布局页和RenderSection的使用
我们开发网站项目的时候,都会遇到这样的问题:就是页面怎么统一风格,有一致的外观,在之前ASP.NET的时代,我们有两种选择,一个是使用MasterPage页,一个是手动,自己在每个页面写CSS样式,但 ...
随机推荐
- js9：设置cookie，读取cookie，删除cookie，保存cookie时间，String，Date对象
原文发布时间为:2008-11-11 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 深入理解计算机操作系统——12章：多进程，IO多路复用
三种并行的应用程序: 1. 基于进程的并发编程: 2. 基于IO多路复用的并发: 3. 基于线程的并发编程: 12.1 基于进程的并发编程 进程的优劣: (1)进程间共享文件表,但不共享用户地址空间, ...
- URAL 1614. National Project “Trams” [ 构造 欧拉回路 ]
传送门 1614. National Project “Trams” Time limit: 0.5 secondMemory limit: 64 MB President has declared ...
- python之-- socket 基础篇
socket 网络模块 注意事项:在python3中,所有数据的传输必须用bytes类型(bytes只支持ascii码)所以在发送数据的时候要么在发送的字符串前面加 'b',要么使用encode('u ...
- Python基础之 一 集合(set)
集合:是一个无序的,不重复的数据组合.主要作用: 去重(把列表变成集合就自动去重) 关系测试 测试俩组数据的交集,差集,并集等关系 关系测试共有7种,如下: 名称 方法名 简写符号 解释交集 s.in ...
- canvas仿芝麻信用分仪表盘
这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...
- linux上安装启动elasticsearch-5.5.1完整步骤
linux上安装启动elasticsearch-5.5.1完整步骤 学习了:https://blog.csdn.net/hingcheung/article/details/77144574 http ...
- [Angular] Expose Angular Component Logic Using State Reducers
A component author has no way of knowing which state changes a consumer will want to override, but s ...
- hdoj 1533 Going Home 【最小费用最大流】【KM入门题】
Going Home Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- Python筛选法（算出十亿之内所有的质数之和）
其实别人写的挺好的了....直接上链接吧http://blog.csdn.net/power721/article/details/8216619