ExtJs 4.x MVC 架构

简介: ExtJs 4.x MVC 架构


  • Model模型是字段和它们的数据的集合,例如User模型带有usernamepassword字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS 3 中的Record类有点像(区别是,Record只是单纯的扁平结构,而Model可以nest),通常都用在Store中去展示grid和其他组件的数据
  • View视图是组件的一种,专注于界面展示。例如, grid, tree, panel 都是view
  • Controllers控制器一个安放所有使你的app正确工作的代码的位置,具体一点应该是所有动作,例如如何渲染view,如何初始化model,和app的其他逻辑
  • ExtJS 4 应用都遵循一个统一的目录结构,每个应有都相同 MVC中,所有类都放在app目录里面,这个目录可以有子目录,代表的是命名空间(一个子目录对应一个命名空间),使用不同的目录存放views,models,controllers,stores。当我们完成例子的时候,目录结构应该和下图一样:

布局和容器

ExtJSUI由组件(Component)构建而成,容器(Container)是一种可以盛放其他组件的特殊类型组件,每个典型的ExtJS应用都是数层嵌套的组件组成的。每个容器都由布局来管理子组件的大小和位置。

 

通用布局方式

3.1.1  Absolute绝对布局

可使用坐标(xy)进行布局

3.1.2  Accordion手风琴布局

实现Accordion效果的布局,也可叫可折叠布局。也就是说使用该布局的容器的子组件是可折叠的形式表现。

3.1.3  Anchor固定布局

会根据容器的大小固定其相对于容器的尺寸

这个布局就是表单面板默认支持的,每一项占据一行,支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比;为数字时一般为负数,表示父容器的值减去差值,剩下的为子项的大小。

 

 

相关文章
|
17天前
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
38 12
|
4天前
|
设计模式 前端开发 Java
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
7 1
|
19天前
|
存储 前端开发 数据库
MVC模式和三层架构
MVC模式和三层架构
29 2
|
1月前
|
前端开发 JavaScript 中间件
基于最新koa的Node.js后端API架构与MVC模式
基于最新koa的Node.js后端API架构与MVC模式
39 1
|
11天前
|
前端开发 测试技术 API
探索安卓应用的架构演进:从MVC到MVVM
本篇文章将深入探讨安卓应用开发中的架构演进,特别关注从传统的MVC(Model-View-Controller)到现代流行的MVVM(Model-View-ViewModel)架构的转变。通过对比两种架构的设计理念、实现方式和实际应用案例,解析MVVM在提高代码可维护性和可测试性方面的优势。
17 0
|
1月前
|
前端开发 Java 数据库
MVC架构简述
MVC架构简述
25 4
|
18天前
|
存储 前端开发 JavaScript
最简单的ExtJS4的MVC实例
最简单的ExtJS4的MVC实例
14 0
|
1月前
|
XML 前端开发 Android开发
Android架构设计——MVC,滴滴 战略 面试
Android架构设计——MVC,滴滴 战略 面试
|
1月前
|
XML 前端开发 Android开发
Android架构设计——MVC(1),Android多进程从头讲到尾
Android架构设计——MVC(1),Android多进程从头讲到尾
|
1月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
91 0

热门文章

最新文章