写给想在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();