写给想在extjs desktop示例中集成mvc的童鞋

关键字：extjs desktop mvc

 

折腾了一阵子extjs desktop示例与mvc的集成，有几种方案整理一下：

1.用老外改写过的extjs desktop，老外彻彻底底的对desktop示例动了大手术，彻底支持mvc，项目地址

https://github.com/derAndreas/Webdesktop

这玩意改动太大了，往java项目里面集成太麻烦，放弃。

 

2.csdn里面有位牛人写了一个模仿京东商城的后台系统，也是mvc模式的desktop应用，他的思路是desktop就用原汁原味的extjs自带的，然后在具体的菜单被点击后的createWindow里面再新建一个extjs mvc的 application，相当于一个功能模块一个mvc application的应用方式。

原作者博文地址：

http://blog.csdn.net/zhangshuaipeng/article/details/7489159

 

关键代码：

  createWindow: function () {
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('address');
        
        Ext.application({
            name: 'FMApp.CustomerApp', //应用的名字
            appFolder: "FMApp/CustomerApp", //应用的目录
            launch: function () {//当前页面加载完成执行的函数                
                if (!win) {
                    win = desktop.createWindow({
                        id: 'address',
                        title: '收货地址管理系统',
                        width: 580,
                        height: 380,
                        iconCls: 'icon_address',
//                        animCollapse: false,
                        border: false,
                        hideMode: 'offsets',
                        closable:true,
                        closeAction:"destroy",
                        layout:"fit",
                        items:{xtype: 'addressgrid'}
                    });
                };
                win.show();
                return win;
            },
            controllers: [
			    'AddressController'
		    ]
        });

 

3.刚刚新鲜出炉的我自己折腾的整合方式，大体思路是还是一个extjs mvc application，然后在app.js里面去创建extjs desktop，然后在 desktop的菜单或者桌面图标被点击后动态加载extjs controller，然后动态创建ui出来。

 关键代码:app.js

var application;
var _myDesktopApp;

Ext.tip.QuickTipManager.init();

Ext.Loader.setConfig({
	disableCaching:true,
    enabled: true,
    paths: {
        'Ext.ux.desktop': 'static/js/lib/desktop',
        'MyDesktop': 'js/xxx/xxx_desktop'
    }
});


Ext.require('MyDesktop.App');
        
application =new Ext.application({
	requires: [
		'Ext.window.MessageBox',
		'Ext.container.Viewport'
	],
	name: 'app',
	appFolder:'js/xxx/app',
    autoCreateViewport: false,
    launch: function() {
        var me = this;
        Ext.QuickTips.init();
_myDesktopApp = Ext.create('MyDesktop.App');
       _myDesktopApp.application=me;
    }
});

 

然后在具体的菜单被点击后的代码里面动态加载controller，关键代码：

 createWindow : function(src){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('窗口'+src.windowId);
        
       var controller_name="app.controller.ClassInfo";
        
	if (!Ext.ClassManager.isCreated(controller_name)) {  
//实现动态加载controller
            var _controller=this.app.application.getController(controller_name);
            _controller.app=this.app; 
        }          
      
        if(!win){
               //动态创建mvc的view
       	var list_view=Ext.widget("ClassInfo_List");
            win = desktop.createWindow({
                id: 'bogus'+src.windowId,
                title:src.text,
                 layout:"fit",
                width:640,
                height:480,
                 items:[list_view],
                iconCls: 'bogus',
                animCollapse:false,
                constrainHeader:true
            });
        }
        win.show();
        return win;
}

 

这就行啦，extjs desktop和mvc的整合就搞定了，灰常的简单，耗费了老子N多的脑细胞。

 

以后在controller里面需要弹出窗口的话记得用desktop.createwindow去创建，代码如下：

	var _view=Ext.widget("ClassInfo_Add");
        var desktop = this.app.getDesktop();
            var add_form_win = desktop.createWindow({
                id: 'class_info_add',
                title:'新增',
                layout:"fit",
                width:440,
                height:280,
                closable:true,
                closeAction:"destroy",
                 items:[_view],
                iconCls: 'bogus',
                animCollapse:false,
                constrainHeader:true
            });			
			//var add_form_win=Ext.widget('ClassInfo_Add');
			add_form_win.down('form').loadRecord(new_record);
			add_form_win.show();