ExtJS4.1稳定版本出来了,终于忍不住,想要尝试一下小刀。
初试了一下,确实给我们带来一些欣喜的新特性。其中重点之一就是MVC架构模式,组织代码真的觉得舒服,但也有一些别扭的,以前的好多方法都没有了,好多配置项也变了;以前很轻易的就能应用自己定义的模板,自己定义的格式化数据,可我怎么的,这两项都不能成功使用。
其实MVC、外部导入JS这些功能,dojo很早就提出来了,只是dojo的很多便于开发的功能没有ExtJS强,所以dojo沉下去了。
ExtJS的MVC,感觉有好的,也有不好的,这是重点不是讲ExtJS MVC怎么用,而是个人感觉ExtJS MVC的应用方式跟实际项目需求有点偏差,用自己的方式改善了一下,所以需要了解ExtJS MVC为前提条件,如果不了解,请到群208878769空间下载相关资料。
ExtJS的MVC模式如下图:
大致的意思是把视图分为了MVC,其中model,store为数据层,controller为控制层,也是聚合器,grid、tree为视图层(view),.官方的意思就是要把将数据层、视图层在controller注册,就实现了整体的聚合——MVC先用聚合器聚合到一起,
我的ext代码组织结构如下图:
具体代码如下:
Ext.define('gwtjs.controller.Controller',{
extend:'Ext.app.Controller',
alias:'widget.Cont',
init:function(){
this.control({
'SysTree':{
itemclick:this.putTabPanel
}
})
},
views:['MainLayout','North','SysTree','StartMenu','MainTabPanel','South','ModuleMgr'],//,'TestGrid'
stores:['ModulesTree'],
models:['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只是别名,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
}
})
},
views:['MainLayout','North','SysTree','StartMenu','MainTabPanel','South','ModuleMgr'],//,'TestGrid'
stores:['ModulesTree'],
models:['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;
tab = mainTabPanel.add(Ext.create(pkg,p));
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空间下载,这里就不提供下载了,太大了,传不上去。
功能待续……
分享到:
相关推荐
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
Extjs4 MVC开发笔记源码,此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息,将所有数据库中的数据清除,由于时间仓促。只有备案管理的grid是可以使用的,其他的功能,按照备案管理的文件照猫画虎即可实现。 ...
ExtJS4.0MVC学习,适合初学者。
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
Extjs4 MVC小实例根据The MVC Application Architecture做的
本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。
extjs4mvc 事例讲解的非常好关于extjs4mvc的分层结构
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
ExtJS4 MVC演示项目
一个完善的extjs 的mvc开发框架例子,大家可以直接下载下来放到自己的框架中进行改造,非常好用
Extjs4MVC后台管理程序实现.pdf
extJS4 MVC demo项目入门将带你走进如何进入ext4 mvc架构的开发中,实现前端的按需加载、动态加载。
extjs-theme-bootstrap-master.zip
一个extjs4应用例子,extjs4 mvc+struts实现grid简单功能,附带jar包.
ExtJs 4 用了一段时间了,今天研究了下ExtJs4的MVC机制,感觉还挺好,建议大家尝试,所以就写了一个demo,帮助那些对ExtJs还不是很懂,或者想用ExtJs4却又不知道怎么做好的朋友。。。多余话不说了大家如果有什么不...
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
extjs-mvc-architecture.pdf
ExtJS 4 MVC CRUD 教程演示了使用 sencha 的 ExtJS 4 框架和 MVC 使用 ExtJS Grid 创建/读取/更新/删除记录(书籍)。 在我的博客上阅读全文。 输出: 在任何浏览器中打开 HTML 文件,输出将类似于下图。 您可以...
Extjs4.0+MVC模式+存动态加载,动态加载面板,动态加载控制器,动态加载树叶子节点,后台servlet模拟json数据