ExtJS 4 MVC开发应用-实现按需加载、支持松藕合概念

xtJS4.1稳定版本出来了，终于忍不住，想要尝试一下小刀。初试了一下，确实给我们带来一些欣喜的新特性。其中重点之一就是MVC架构模式，组织代码真的觉得舒服，但也有一些别扭的，以前的好多方法都没有了，好多配置项也变了；以前很轻易的就能应用自己定义的模板，自己定义的格式化数据，可我怎么的，这两项都不能成功使用。

其实MVC、外部导入JS这些功能，dojo很早就提出来了，只是dojo的很多便于开发的功能没有ExtJS强，所以dojo沉下去了。

 

小试了一下ExtJS的MVC，感觉有好的，也有不好的。

ExtJS的MVC模式如下图：

大致的意思是把视图分为了MVC，其中model,store为数据层，controller为控制层，也是聚合器，grid、tree为视图层（view）,.官方的意思就是要把将数据层、视图层在controller注册，就实现了整体的聚合——MVC先用聚合器聚合到一起，

Controller 具体的代码组织结构如下图：

具体代码如下：

 

Ext.define('gwtjs.controller.Controller',{
    extend:'Ext.app.Controller',
    alias:'widget.Cont',
    init:function(){
        this.control({
            'SysTree':{
                itemclick:this.putTabPanel
            }
        })
    },
    <strong>views:</strong>['MainLayout','North','SysTree','StartMenu','MainTabPanel','South','ModuleMgr'],//,'TestGrid'
    <strong>stores:</strong>['ModulesTree'],
    <strong>models:</strong>['Module','SysMgrModel'],
    autoCreateViewport: true,
    putTabPanel:function(view, record, element, index, eventObject,object){}
});

 

其它源码另行下载，这里先略……

运行效果：

****layout分成了上下左右四部分，使用也简单简洁。

 

但是这样，就带来一个问题了，右侧的tabpanel我是要动态添加的，一般的项目几十个模块啊，难道都让我一一的加到controller里面吗？何为松藕合？这样做，联系得不就死死的吗？而且这样的聚合，就是要把所有的视图预先都添加进去，页面加载完后就初始化，数据也要加载，在一般的项目中，几十个模块是常有的事，这样做法，不跑死了；也可以把数据加载变成后面的事，但这也只是变通的办法啊！JS源码还是加载了啊！

这么一想就觉得，

ExtJS的MVC松藕合性实在太差，原因就是聚合器Controller,待事先把views、models、stores、加到Controller，所以我就想着，怎么样才能动态的添加，在点击树型菜单后再添加相关的东东；动态的把stores、views、models都加进去，可是百试不灵，console.dir打印controller,没有相关的方法，用数组的方式自己写个方法添加，可是不能自动创建视图，或者不能实例化stores等，看网码、网上查，折腾了一两天，无意看到有人在查Ext.create如何传参数，是啊，我也有此疑问，因为定义自己的组件是常有的事，组件传个参数是常有的事，就看了看API对Ext.create的说明，看到如下：

Ext.create is alias forExt.ClassManager.instantiate.

Parameters

name : String
args : Mixed
,... Additional arguments after the name will be passed to the class' constructor.

一下找到灵感了，明白了，Ext.create只是别名，Ext.ClassManager.instantiate.的别名而已，后面可以跟args,

修改Controller的代码，Controller全部如下：

 

Ext.define('gwtjs.controller.Controller',{
    extend:'Ext.app.Controller',
    alias:'widget.Cont',
    init:function(){
        this.control({
            'SysTree':{
                itemclick:this.putTabPanel
            }
        })
    },
    <strong>views</strong>:['MainLayout','North','SysTree','StartMenu','MainTabPanel','South','ModuleMgr'],//,'TestGrid'
    <strong>stores</strong>:['ModulesTree'],
    <strong>models</strong>:['Module','SysMgrModel'],
    autoCreateViewport: true,
    putTabPanel:function(view, record, element, index, eventObject,object){
        if(record.data.leaf){
            var moduleTabId = 'tab-'+record.data.id;
            var mainTabPanel = Ext.getCmp('MainLayout').getComponent('MainTabPanel');
            var tab = mainTabPanel.getComponent(moduleTabId);
            if(!tab){
                var p = {
                    title:record.data.text,
                    id:moduleTabId,
                    iconCls:record.data.iconCls,
                    closable:true
                };
                //只能这样传，不然组件渲染有问题,没有标题，没有图标等,只有在create的时候另外传参数才能解决；
                //另外pkg由数据存储的类名拼接而成,不用写app下一级的包名，如果再下级就要写了；
                var pkg = 'gwtjs.view.'+record.data.url;
                <span style="font-size:16px;"><strong>tab = mainTabPanel.add(Ext.create(pkg<span style="color:#33ff33;">,p</span>));</strong></span>
                console.log("姐姐的，成功啦！");
                tab.getStore().load();
            }
            
            mainTabPanel.setActiveTab(tab);
        }
    }
});

 

传个对象P进去，是tab的title、id等参数，测试：’ 姐姐的，成功啦！’,姐姐的，这样就可以无藕合了，用到什么加载什么！松了口气，最主要的问题解决，后面就是细节方面的，如格式化，定制模板等，都是小事了。

 

另外试了一下，treegrid等这些组件有很大的改善，编辑起来方便了很多；在grid的行中添加个按钮啊什么的，也方便了很多，不像以前哪样，大费周章；

 

新的体验还需继续，相信会有更多惊喜。

本次项目使用ExtJS 4.1正式版，服务端是JAVA Struts 2.3.1.2、Spring 3.1、Hibernate 3.5,有需要源码的朋友可以到群208878769空间下载，这里就不提供下载了，太大了，传不上去。

作者:flash8627
原文:http://blog.csdn.net/flash8627/article/details/7537686