ExtJS 6.7 应用架构介绍(MVC/MVVM)

前言


ExtJS 提供了对 MVC 和 MVVM 架构的支持。这两种架构都致力于根据功能逻辑分割代码,又各有其长。

这个教程的目的在于讲解构成这两个架构的组件的基础知识。

什么是 MVC?


在 MVC 架构中,大部分类是 Model(模型)、View(视图)或 Controller(控制器)。用户与视图交互,视图显示模型中保存的数据,由控制器根据需要更新视图和模型来响应交互。

View 和 Model 之间通常没有直接联系,因为控制器指导着两者的更新。通常来说,在 MVC 架构中 Controller 包含了大部分的应用程序逻辑,而 View 几乎没有什么业务逻辑。 Model 则主要是数据的接口,包含着用于管理数据变化的业务逻辑。

MVC 的目标是清晰地定义应用中每个类的职能,使它们能够有效地解耦,为应用程序的测试和维护提供便利,并提高代码的复用性。

ExtJS 7抢先版

ExtJS 7.0抢先版已经发布。该版本包含了许多增强功能和令人兴奋的新功能,而其中的重点是增强现代工具包。想了解更多与此版本有关的信息,请继续往下阅读。

新加的和有更新的组件:

表单组(复选、单选按钮)可以轻松的对复选框和单选按钮集合进行分组,以支持在组级进行布局和验证.


ExtJS 6.7不能跨域上传文件的bug

因为要使用表单实现跨域上传文件,但是发现在6.7居然不行,需要自己手动去创建FormData对象来提交,这比较奇怪。经过分析源代码,终于找到了这个bug,主要代码如下:

解决Modern工具包中Ext.field.Date的提交值问题

使用Classic工具包的日期字段,在表单提交的时候,获取的是日期字段的提交值,也就是会在表单提交的时候会将值转换为与定义的格式相符的值。而在Modern工具包中,提交的值是原始值,也就是带有时区属性的日期值,如果在服务器端不进行时区转换,那么日期值就不是预想的值。

要解决Modern工具包中的这个问题,如果不想重写任何基类,就只能在提交前或在服务器端对值进行处理,这无疑增加了代码量。最简单直接的办法就是重写Ext.field.Panel的getValues方法,具体重写代码如下:

VSCode 升级 1.31.0 后,Sencha 扩展无法使用的解决办法

刚刚把 VSCode 升级到了 1.31.0,结果 Sencha 扩展 不能用了,打开项目时,左下角没有了下图的Ext JS: xx% indexed

打开 VSCode 的开发人员工具(帮助-切换开发人员工具),发现如下错误:

聚合内容