Extjs4 MVC詳解

關于一個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();    	
    }
});