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样式,但 ...
随机推荐
- try catch finally执行顺序 (return / 变量覆盖)
finally有return 始终返回finally中的return 抛弃 try 与catch中的return 情况1:try{} catch(){}finally{} return x; try{ ...
- Jmeter的几个关键配置文件
1.配置文件位于bin目录下: 2.配置文件可能存在优先级关系,好像user.properties会覆盖jmeter.properties,一般修改配置都是修改或者添加user.properties, ...
- Linux监測某一时刻对外的IP连接情况
相信大家都熟悉netstat命令吧,这里就主要採用此命令.网上流传的DDoS Deflate工具就是採用IP数量来统计对外连接数,然后结合Iptables的方法来实现某个IP增加黑名单和解禁某IP n ...
- Jackson说明
Jackson说明 package com.stono.sboot2_chp4_jackson.controller; import com.fasterxml.jackson.annotation. ...
- Robocopy进行大量迁移
建议使用 Windows Server 2012 R2 或 Windows Server 2012 随附的 Robocopy.exe 版本. 即然官方建议我们用2012或2012R2所带的Roboco ...
- Linux-百度云之AccleriderMini使用
打开命令行,然后输入: sudo apt-get install mono-devel 最后安装完成时,运行: 示例:mono xx.exe 实例:mono accleridaMini.exe 最后成 ...
- INTERSECT（交集）集合运算
在集合论中,两个集合(记为集合A和B)的交集是由既属于A,也属于B的所有元素组成的集合. 在T-SQL 中,INTERSECT 集合运算对两个输入查询的结果集取其交集,只返回在两个查询结果集中都出现的 ...
- maven 项目 spring mvc + jdbc 配置文件
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- anaconda中新rdkit安装
1. 执行 conda create -c rdkit -n my-rdkit-env rdkit 该步骤经测试发现需FQ,而模拟器无法完成FQ(至少我不知道方法), 因此在本机上配置好环境后复制粘贴 ...
- malloc内存分配
网上总结到的信息: (1) 静态分派:是在栈上分配,是由用户自己申请,是由操作系统自己释放的 动态分配:是由编译器分配,操作系统没有提供这样的机制,所以自己申请,必须自己删除! (2)你也要明确.栈的 ...