javascript代码实例教程-Extjs MVC学习随笔01

发布时间:2019-01-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Extjs MVC学习随笔01脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

javascript代码实例教程-Extjs MVC学习随笔01

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

javascript代码实例教程-Extjs MVC学习随笔01

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

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

一:视图的创建:

就像目前本人所做的项目:一个互联网医疗项目,整体就是采用的Extjs MVC模式,如果自己创建一个组件的话我们可以给其一个“xtyPE”:

javascript代码实例教程-Extjs MVC学习随笔01

,然后在需要调用该组件或者页面的页面只需要在ITems里面配置所有项的时候将其写为:{xtype:'...'}就可以将该组件拿出来使用了,当然还需要注意的是必须要在组件创建页里就是上图上有一个"requires"属性,在这里需要将所有引用该组件的页面的路径写上去,然后引用页才可以调用该组件。

二:控制器:

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

javascript代码实例教程-Extjs MVC学习随笔01

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

javascript代码实例教程-Extjs MVC学习随笔01

javascript代码实例教程-Extjs MVC学习随笔01

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

javascript代码实例教程-Extjs MVC学习随笔01

三:数据来源store

javascript代码实例教程-Extjs MVC学习随笔01

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

javascript代码实例教程-Extjs MVC学习随笔01

其他的页面在调用这个数据源的时候就可以这样使用了:

javascript代码实例教程-Extjs MVC学习随笔01

 

 

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

javascript代码实例教程-Extjs MVC学习随笔01

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Extjs MVC学习随笔01全部内容,希望文章能够帮你解决javascript代码实例教程-Extjs MVC学习随笔01所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。