关于一个ext4MVC的例子,代码中有相关注释;
详细见附件(是一个myEclipse项目)
本人在使用中的感受:
如果我们这样分层了,有利于组件重用,软件开发和维护,但学习成本很高,要新人接受需要一段时间,在开发中要按照一定规范.
建议不要随便使用这样分层!
每一层的介绍:
1,model和store其实就是管数据的,
2,view层,纯界面,极少逻辑代码,逻辑代码都写到controller中,这样好管理.
3,controller,建议逻辑代码都写到这里,这样好管理.
关于文件夹名称:
注意文件夹起名controller/model/store/view文件夹名称一定的,
这样每个相应的类名也可以根据这个来取,如:"keel.view.goods.GoodsListView"
keel是整个应用程序的命名空间,view就是view文件夹,goods.GoodsListView就是view文件夹下的goods文件夹的
GoodsListView.js文件;
这样程序就可以用动态加载功能了;
controller介绍:
其实我们很大一部分工作就在controller了,例子代码如下:
/*
商品控制层,
所有逻辑代码都在这里写
*/
Ext.define('keel.controller.GoodsCtrl', {
extend: 'Ext.app.Controller',
stores: ['GoodsStore'],//声明该控制层要用到的store
models: ['GoodsModel'],//声明该控制层要用到的model
views: ['goods.GoodsListView','goods.GoodsWinView'],//声明该控制层要用到的view
refs: [//相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了
{
ref: 'goodslistview',
selector: 'goodslistview'
},
{
ref: 'goodswinview',
selector: 'goodswinview'
}
],
init: function() {
this.control({//这里的this相当于这个控制层
'viewport > goodslistview': {
afterrender: function(gp){//侦听goodslistview渲染
gp.down('button[action=testBtn1]').on('click',function(){
//侦听goodslistview工具条上action=testBtn1的按钮单击事件
this.showWin();
},this);
gp.down('button[action=testBtn2]').on('click',function(){
//侦听goodslistview工具条上action=testBtn2的按钮单击事件
alert(this.getGoodslistview().title)
},this);
}
},
'goodswinview button[action=ok]': {
//侦听goodswinview中action=ok的按钮单击事件
click: function(){
this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));
}
}
});
},
showWin : function(){
Ext.create('keel.view.goods.GoodsWinView').show();
}
});
- 大小: 29.3 KB
分享到:
相关推荐
ExtJS4.0MVC学习,适合初学者。
Extjs4 MVC开发笔记源码,此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息,将所有数据库中的数据清除,由于时间仓促。只有备案管理的grid是可以使用的,其他的功能,按照备案管理的文件照猫画虎即可实现。 ...
Extjs4 MVC小实例根据The MVC Application Architecture做的
extjs4mvc 事例讲解的非常好关于extjs4mvc的分层结构
ExtJS4.0.7的MVC模式。 欢迎大家下载。
ExtJS4 MVC演示项目
ExtJs 4 用了一段时间了,今天研究了下ExtJs4的MVC机制,感觉还挺好,建议大家尝试,所以就写了一个demo,帮助那些对ExtJs还不是很懂,或者想用ExtJs4却又不知道怎么做好的朋友。。。多余话不说了大家如果有什么不...
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
最新版本,ExtJS6 MVC 精简示例!!!,一个可以参考的小例子!
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
extjs4 前端mvc模式 货物处理的crud
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
里面我把extjs4的包给删除了,自己要把压缩包解压一下,放进来就可以了。是用extjs mvc写的,controller里面会配置model store view,然后mode和store的关系,相信大家也很清楚了,store里面会用到model,当然也可以...
基于EXTJS 4.2 MVC环境搭建,并从后台获取数据在extjs Grid上显示出来
Extjs4 MVC 官方实例整合 未改动 未删减 部署即可运行 下载部署到tomcat服务器即可运行,官方实例未删减
本工程采用ExtJs4.0 开发,采用mvc开发模式,分为controller view model store。
extJS4 MVC demo项目入门将带你走进如何进入ext4 mvc架构的开发中,实现前端的按需加载、动态加载。
springmvc+hibernate+extjs4mvc 权限管理springmvc+hibernate+extjs4mvc 权限管理springmvc+hibernate+extjs4mvc 权限管理
extjs6 mvc demo,包含页面布局,tabPanel,点击事件等