ExtJS4的MVC模式实例

MVC模式， 想必大家都很清楚。  Model  -  View - Controller。

ExtJS在4.0以后也开始引入了MVC模式， 程序的结构也就变得规范。

开发者可以利用MVC的设计模式规划了开发流程。

下面的一个MVC模式的小例子。

在demo文件夹里就是ExtJS的MVC架构。

先来看界面。

demo.html是我们要登陆的界面，只需在demo.html中引入app.js文件即可。

app.js定义这个MVC模式的内容。 app文件夹是又controller , model, store, view文件夹。

app.js

Ext.onReady(function() {
	
	Ext.QuickTips.init();
	
	Ext.Loader.setConfig({
		enabled : true
	});
	
	Ext.application({
		name: 'app',
		appFolder: 'app',
	    launch: function() {
	        Ext.create('Ext.container.Viewport', {
	            items: {
	                xtype : 'mainLayout'
	            }
	        });
	    },
	    controllers : [
	    	'demoController'
	    ]
	});
	
});

定义mvc模式的文件夹为app。 应用程序的名字也是app。

demoModel.js

Ext.define('app.model.demoModel',{
	extend : 'Ext.data.Model',
	fields : [
		{name : 'id' , type : 'int'},
		{name : 'name' , type : 'string'},
		{name : 'phoneNumber' , type : 'string'}
	]
})

demoStore.js

var data = {
    users: [
        {
            id: 1,
            name: 'Ed Spencer',
            phoneNumber: '555 1234'
        },
        {
            id: 2,
            name: 'Abe Elias',
            phoneNumber: '666 1234'
        }
    ]
};

Ext.define('app.store.demoStore',{
	extend : 'Ext.data.Store',
	autoLoad: true,
	model : 'app.model.demoModel',
	data : data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
})

这里由于是演示。我们使用了内存代理。 

deptList.js

Ext.define('app.view.deptList', {
	extend : 'Ext.grid.Panel',
	alias : 'widget.deptList',
	frame : true,
	store : 'demoStore',
	frame : true,
	multiSelect : true,
	
	columns : [
		{header : '编号', dataIndex : 'id', width : 100},
		{header : '姓名', dataIndex : 'name', width : 100},
		{header : '电话', dataIndex : 'phoneNumber', width : 200}
	],

	tbar:[{
		xtype: 'button', text: '添加'
	},{
		xtype: 'button', text: '删除'
	},{
		xtype: 'button', text: '修改'
	}],
	
	
	selModel : {
		selType : 'checkboxmodel'
	}
	
	
});

demoView.js只是一个普通的panel。 里面放这个grid。

注意上面的这个文件定义的时候必须以app开头。 因为我们在app.js里定义了应用程序的名字为app。

view文件夹以app.view.*开始。  model文件夹以app.model.*开始。 以此类推。

最后让我们来看下demoController.js

Ext.define('app.controller.demoController', {
    extend: 'Ext.app.Controller',
    init: function() {
    	this.control( {
    		
    		'deptList button[text=添加]': {
    			click: function(b) {
    				alert('添加');
    			}
    		},
    		
    		'deptList button[text=删除]': {
    			click: function(b) {
    				alert('删除');
    			}
    		},
    		
    		'deptList button[text=修改]': {
    			click: function(b) {
    				alert('修改');
    			}
    		}
    		
    	}
    )},
    models : ['demoModel'],
    stores : ['demoStore'],
    views : ['demoView','deptList']
});

有三个属性:

models， stores， views。  分别代表三个文件夹中自己定义的控件，model和store

我们在三个按钮的逻辑处理放到了controller中处理。 这样就很好的实现了代码分离。

最后附上源代码。。

下载地址：

http://download.csdn.net/detail/fj359941160/4287579