Ext 4.0 MVC详解

本人在使用中的感受:

如果我们这样分层了,有利于组件重用,软件开发和维护,但学习成本很高,要新人接受需要一段时间,在开发中要按照一定规范.

建议不要随便使用这样分层!

 

每一层的介绍:

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了,例子代码如下:

 

Js代码  

1.     /* 
2.     商品控制层, 
3.     所有逻辑代码都在这里写 
4.     */  
5.     Ext.define('keel.controller.GoodsCtrl', {  
6.         extend: 'Ext.app.Controller',  
7.         stores: ['GoodsStore'],//声明该控制层要用到的store  
8.         models: ['GoodsModel'],//声明该控制层要用到的model  
9.         views: ['goods.GoodsListView','goods.GoodsWinView'],//声明该控制层要用到的view  
10.     refs: [//相当于一个映射,这样就可以在控制层方便的通过geter取得相应的对象了  
11.         {  
12.             ref: 'goodslistview',  
13.             selector: 'goodslistview'  
14.         },  
15.         {  
16.             ref: 'goodswinview',  
17.             selector: 'goodswinview'  
18.         }  
19.     ],  
20.     init: function() {  
21.         this.control({//这里的this相当于这个控制层  
22.             'viewport > goodslistview': {  
23.                 afterrender: function(gp){//侦听goodslistview渲染  
24.                     gp.down('button[action=testBtn1]').on('click',function(){  
25.                         //侦听goodslistview工具条上action=testBtn1的按钮单击事件  
26.                         this.showWin();  
27.                     },this);  
28.                       
29.                     gp.down('button[action=testBtn2]').on('click',function(){  
30.                         //侦听goodslistview工具条上action=testBtn2的按钮单击事件  
31.                         alert(this.getGoodslistview().title)  
32.                     },this);  
33.                 }  
34.             },  
35.             'goodswinview button[action=ok]': {  
36.                 //侦听goodswinview中action=ok的按钮单击事件  
37.                 click: function(){  
38.                     this.getGoodswinview().setTitle(Ext.util.Format.date(new Date(),'Y-m-d H:i:s'));  
39.                 }  
40.             }  
41.         });  
42.     },  
43.     showWin : function(){  
44.         Ext.create('keel.view.goods.GoodsWinView').show();        
45.     }  
46. });