关键字: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();
相关推荐
extjs4.2 desktop mvc下载直接使用
严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可
extjs4.2 desktop demo 拓展功能:图标换行,拖动,多级开始菜单,修正extjs4.2的一些bug,加了几个桌面图标,纯js无后台程序,无需发布即可浏览。
ExtJS DeskTop
最新版本,ExtJS6 MVC 精简示例!!!,一个可以参考的小例子!
配合extjs4.2.0的MVC开发模式教程使用更好
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码extjs editgrid示例代码
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
extjs4.0 MVC 示例代码
Extjs4 desktop 改mvc 国外的php
extjs desktop实例(个人/家庭收支系统)第2部分
Extjs4新推出的MVC模式 研究了几天终于弄明白怎么回事了,写了个例子, 可以实现增删改查, 分步加载controller
spring mvc+hibernate+extjs代码示例 请将数据库脚本在oracle数据库中执行后 直接运行该程序
ExtJS4.0项目教程(MVC)
自己写的ExtJS4.0用MVC的示例
EXTJS学习,webform+mvc routeing extjs布局 适合初学者
ExtJS4官方指南:MVC架构简体中文版宣贯.pdf
在网上找了很多资料,关于ExtJS Desktop改造MVC的资料非常少,要么改动相当大,要么无法运行。 借鉴了下面github上的一个例子,这个例子非常简洁,原滋原味,几乎没有大改动官方文件,但是无法运行,我做了一定量的...