ExtJS 之MVC框架理解

这段时间公司让做的项目比较复杂，同时提需求的领导也说了这个项目有些违反常规，所以设计思路有些混乱，但是既然领导交代下来任务，就应该完成。因为刚刚毕业，所以对各种知识的理解不是很深刻，在技术上自己也进行了一些尝试，虽然能满足自己的需求，但是却对后续的项目任务有影响，所以和老员工商量，决定磨刀不误砍柴工---直接上复杂的。对于ExtJS4.0来说可以说是完全没接触过，这也是第一次学习前台框架。

好了，上需求：我的任务是实现用户能够自己见表，自己对所用到的表进行结构设计，并且能够录入数据；第二个是多表互联，即一个表中选中一条记录，这条记录的详细信息会以一个表的形式展现，同时与之有关的可能出现的也都遍历出来，所以总的说起来要六个表。

一开始直接就是那个布局文件作为模版，然后从界面入手，先用gridPanel、TreePanel、Toolbar等堆砌起来，虽然实现了功能，但是结果很不理想，代码复用率极低，无奈，只好搜寻各种方法。下面就从我对ExtJS 在MVC框架上的理解！

MVC即：Model、View、Controller，Model就是我们所说的实体，View就是我们用于展现给用户的界面，而Controller则是控制器，用装配数据，控制显示。下面看一下ExtJS在MVC上的文件结构：

对应MVC，我们将应用程序放在app文件夹下，然后app.js即程序的入口，controller文件夹放的是不同的控制器，当有多个实体时可以根据不同的实体赋予不同名字，如UserController、ArticleController等等，model放的实体的定义，通常和后台的实体类bean类似，store放的是数据组装，通常取数据方式有静态和动态两种，静态的就是写死的，动态的可以通过ajax从后台取数据，也可以从xml或Json文件中取数据，view中放的就是一些展现的js了，比如说想要一个用户列表，就可以做一个GridPanel的js，用的时候直接通过ViewPort进行加载即可，data放的是一些Json文件，store用得到，ext-4.0是Ext的类库了，ext-debug.js是用于开发使用的，developer可以读懂，而ext.js则是用于最后程序的，比较小，这些目录和结构可以通过Sencha Cmd 辅助开发ExtJS4 MVC架构项目自动建立。

对应上图，下面看一下对应的Ext的MVC架构图：

由图中我们可以看出application由VIewPort和Controller组成，Controller负责加载Model和Store，当通过指定的model和store生成可用的view时，在加载到ViewPort中，从而生成整个页面，model和store也是和数据库相关联的，通常通过后台存取，存取方式采用json，这样比较快捷。

上述需求仅仅实现了第一个，而第二个还在探索中，关于博客中的文章也仅仅是自己的思路笔记而已，如果能帮到别人最好，同时也希望多和大牛们多多交流，以提高自己！