extjs 데스크톱 예시에 mvc를 통합하고 싶은 아동화

키워드: extjs desktop mvc
 
한동안 extjs 데스크톱 예시와 mvc의 통합을 괴롭혔는데 몇 가지 방안을 정리했습니다.
1. 외국인이 개작한 extjs 데스크톱으로 외국인들은 데스크톱 예시를 철저히 대수술했고 mvc, 프로젝트 주소를 철저히 지원했다.
https://github.com/derAndreas/Webdesktop
이 물건은 변동이 너무 커서 자바 프로젝트에 집적하는 것이 너무 번거롭고 포기합니다.
 
2. csdn에 어떤 소인이 경동상점의 백그라운드 시스템을 모방하고 mvc모드의desktop 응용 프로그램을 썼다. 그의 사고방식은 데스크톱이 원래의 extjs로 직접 가져온 것이다. 그리고 구체적인 메뉴가 클릭된 후의create 윈도우에 extjs mvc의 응용 프로그램을 새로 만드는 것이다. 이것은 기능 모듈인 mvc 응용 프로그램의 응용 방식에 해당한다.
원작자 블로그 주소:
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 응용 프로그램이고 응용 프로그램입니다.js에서 extjs 데스크톱을 만들고 데스크톱 메뉴나 데스크톱 아이콘이 눌린 후에 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;
    }
});

 
그리고 구체적인 메뉴가 클릭된 코드에 컨트롤러를 동적으로 불러옵니다. 핵심 코드:

 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 데스크톱과 mvc의 통합은 끝났어. 회색은 간단하고 노자 N이 많은 뇌세포를 소모했어.
 
나중에 컨트롤러에서 팝업 창이 필요하면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();