Extjs MVC学习随笔01

时间:2022-10-28 14:55:43

Extjs Mvc模式下的整个MVC框架体系即下图:

Extjs MVC学习随笔01

包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层)。之所以用MVC我想是因为减轻针对某一页面的单一的JS 的开发,为啥呢,可以看一下没有使用MVC模式的Extjs 的编码:

Extjs MVC学习随笔01

(因为我也是新手,所以可能里面的代码有点儿冗杂)

仅仅是一个页面,代码量已经上了千行以上,可想而知,对于功能复杂的页面如果用单一的Extjs UI开发的话 代码量肯定可烦人(最主要是翻来翻去的,鼠标滚轮都烦了...)。而且如果你写完这个页面,其他的页面也有相同功能的组件的话,你是不是又要重新Copy然后在写一遍重复的代码呢.... 那样也就贼恶心了。

一:视图的创建:

就像目前本人所做的项目:一个互联网医疗项目,整体就是采用的Extjs MVC模式,如果自己创建一个组件的话我们可以给其一个“xtype”:Extjs MVC学习随笔01,然后在需要调用该组件或者页面的页面只需要在items里面配置所有项的时候将其写为:{xtype:'...'}就可以将该组件拿出来使用了,当然还需要注意的是必须要在组件创建页里就是上图上有一个"requires"属性,在这里需要将所有引用该组件的页面的路径写上去,然后引用页才可以调用该组件。

二:控制器:

如果我们某一个搜索按钮有一个handler的话,我们可以将该方法写到控制器里面去,如:Extjs MVC学习随笔01

这里面的“onSearch”就是一个方法,而该方法则是在控制器里面的专一的JS文件里面写着

Extjs MVC学习随笔01

Extjs MVC学习随笔01

当然这里也有一个需要注意的:我们需要指定controller的位置,这个属性也是在视图页面配置的:Extjs MVC学习随笔01

三:数据来源store

Extjs MVC学习随笔01

这里面用的是defin,自定义的store,给了一个ID,与一个别名

Extjs MVC学习随笔01

其他的页面在调用这个数据源的时候就可以这样使用了:Extjs MVC学习随笔01

其中type 对应的就是store里的别名“alias”属性,storeid就不用说了,这样只要ashx没写错,那么数据就会出现了:

Extjs MVC学习随笔01

当然具体里面还有好多更深的用法,本人也是菜鸟一个,只能慢慢学习喽  —.—  。

坚持就是收获,一口吃不成胖子,记下生活学习的点点滴滴进步,再回首,怎么地也是一笔财富。

—————— 给自己