近期关于Extjs4架构的心得

说起团队协作开发，就必须得考虑如何组织代码结构，以便同事分工，同时要便于维护。之前我用的是一个很傻很天真的结构，一个功能模块是一个可以独立运行的jsp，当调用到这个模块的时候，就在框架页中引入这个jsp，使用的是panel中的loader功能。虽然在Extjs4中可以避免ext-all.js的重复加载，而且这样确实可以把不同的模块代码分开来，但是这种方式很不爽，如当父容器大小发生变化，引入的jsp模块中的组件大小不会随之改变，即便父容器设定了fit布局。

后来终于下定决心，抛弃之前旧版本的extjs写法，完全采用define的形式来定义组件，并且将最常用的组件自定义，封装了一些方法比如grid的增删改，form的提交等。项目也就变成了单页。同时采用了自动加载机制。否则得在引子页中得引入多少js文件啊？而且这样可以在调用组件的时候才会加载相关的js文件，有效避免启动速度慢。

EXTJS4有一个MVC的概念，是将model、store、view、controller分开。在Sencha architect 2的帮助下，非常容易实现MVC架构。但是 我仔细想了想，这么做只是将整个项目分成了MVC，而每一个模块并不是MVC。随着项目的扩大，controller中的控制函数必然会极度臃肿。我所希望的是每一个模块的代码都是相互独立的，而不是混在一起。所以我采用了这种方式，每一个模块分成了三层，model、store、view，view就是这个模块的入口。同时采用自动加载，当实例化view的时候与view相关的js文件会自动加载过来。因为暂时没搞懂怎么用多个app来开发项目，所以就只好这样了，不过也还算勉强满意。不过有个缺点就是view之间的相互控制实在是不好把握，比较考验extjs的使用熟练度。

最后再总结一下代码技巧。关于EXTJS4的自动加载，其实非常简单。只需要在引子页的js中加上这个代码。

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath({
'Ext.ux.desktop': 'js',
MyDesktop: '',
'Wk' : 'wk/baseClasses',
'wk.system.js.roleMng.model' : 'wk/system/js/roleMng/model',
'wk.system.js.roleMng.store' : 'wk/system/js/roleMng/store',
'wk.system.js.roleMng.view' : 'wk/system/js/roleMng/view',
'wk.system.js.userMng.model' : 'wk/system/js/userMng/model',
'wk.system.js.userMng.store' : 'wk/system/js/userMng/store',
'wk.system.js.userMng.view' : 'wk/system/js/userMng/view',
'wk.system.js.rightMng.view' : 'wk/system/js/rightMng/model',
'wk.system.js.rightMng.store' : 'wk/system/js/rightMng/store',
'wk.system.js.rightMng.view' : 'wk/system/js/rightMng/view'
});

第一句话是开启自动加载。setPath中的内容，其中

'wk.system.js.roleMng.model'

是类名的前缀，比如一个类叫wk.system.js.roleMng.model.A，那么如上便是A类的类名前缀。wk/system/js/roleMng/model则是A类的文件路径。这是一个映射关系。我把文件路径跟类名前缀写成一样了，省的自己混淆不清。同时类名与文件名必须完全相同，否则会加载不到。

当你使用Ext.create('完整的类名')的时候，它就会开始自动加载相关类的js文件。

最后，建议多多使用Sencha architect 2自动生成的代码，否则极容易出现莫名其妙的问题。