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样式,但 ...
随机推荐
- 飞扬的小鸟（codevs 3729）
题目描述 Flappy Bird 是一款风靡一时的休闲手机游戏.玩家需要不断控制点击手机屏幕的频率来调节小鸟的飞行高度,让小鸟顺利通过画面右方的管道缝隙.如果小鸟一不小心撞到了水管或者掉在地上的话,便 ...
- Android Notification通知简介
Android Notification通知简介 根据activity的生命周期,在activity不显示时,会执行onStop函数(比如按下home键),所以你在onStop函数(按退出键除外)里面 ...
- linux 报错：E: Package 'libmemcached' has no installation candidate
linux 报错:E: Package 'libmemcached' has no installation candidate 网上查资料说是软件安装源没有这个软件,需要添加软件源. 1.备份源列表 ...
- Xcode warning：Auto property synthesis will not synthesize property
iOS 警告提示如下: 添加 @dynamic告诉编译器这个属性是动态的,动态的意思是等你编译的时候就知道了它只在本类合成; 如下:
- python学习之-- random模块
random模块random.random():随机打印一个小数random.randint(1,10):随机打印1-10之间的任意数字(包括1和10)random.randrange(1,10):随 ...
- Delphi字符串加密/解密
unit uEncrypt_Decrypt; interface uses SysUtils; const XorKey: array[0..7] of Byte = ($B2, $09, ...
- 转 asterisk app命令中文翻译
常规指令 Authenticate:鉴别用户 VMAuthenticate:根据“voicemail.conf”鉴别用户 Curl:接受外接URLs的修复.支持POSTing DUNDiLookup: ...
- how to read openstack code: loading process
之前我们了解了neutron的结构,plugin 和 extension等信息.这一章我们看一下neutron如何加载这些plugin和extension.也就是neutron的启动过程.本文涉及的代 ...
- 判断所ping主机的操作系统
根据它的值判断所ping主机的操作系统类型. TTL被称为生存期,也就是你所传输的数据在网络上经过的路由器的最大个数. 操作系统 TTLLINUX 64WIN2K/NT 128WINDOWS 系列 3 ...
- 切勿创建包括auto_ptr的容器对象
当你拷贝一个auto_ptr时,它所指向的对象的全部权被移交到拷入的auto_ptr上,而它自身被置为NULL.我的理解是:拷贝一个auto_ptr意味着改变它的值.比如: auto_ptr&l ...