Extjs MVC学习随笔01

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

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

（因为我也是新手，所以可能里面的代码有点儿冗杂）

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

一：视图的创建：

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

二：控制器：

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

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

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

三：数据来源store

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

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

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

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

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

  —————— 给自己

原标题：Extjs MVC学习随笔01

关键词：JS