最简单的ExtJS4的MVC实例

原创

gloomyfish 2012-08-11 13:45:00 ©著作权

文章标签 email mvc application extjs autoload stylesheet 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者gloomyfish的原创作品，请联系作者获取转载授权，否则将追究法律责任

最简单的ExtJS4的MVC实例

从ExtJS4.0开始，ExtJS支持MVC架构，让前端开发者更好的实现数据与逻辑分离，使用

View, Controller, Model组件定义来完成浏览器前端业务。提高代码可以维护性。ExtJS中

的View是被动模式，被Controller持有。

一个最简单的基于ExtJS4的MVC的App实例，有Contoller， View， Model，Store等组成

其目录结构必须遵循以下结构：

最简单的ExtJS4的MVC实例_mvc

每个ExtJS的应用都必须从创建一个Ext.app.Application实例开始，app/app.js创建一个Application实例

并完成初始化。name: 'USERS'表示命名空间为USERS，完全源代码如下：

Ext.Loader.setConfig({       enabled: true });   Ext.create('Ext.app.Application', {       name: 'USERS',     autoCreateViewport: false,     controllers: ['Users'],       launch: function() {     	     } });

定义一个Controller

Controller将会绑定一个Application，Controller的真实目的是监听事件并作出合适的响应动作

通常这些事件来是View上面的用户操作。创建一个Controller为app/controller/Users.js

Ext.define('USERS.controller.Users', {       extend: 'Ext.app.Controller',       models: ['User'],     stores: ['Users'],     views: ['Panel', 'Grid'],       init: function() {         Ext.create('USERS.view.Panel', {             layout: 'fit',             height: 300,             width: 500,               items: {                 xtype: 'userlist'             },               renderTo: document.body         });           Ext.create('USERS.view.Grid').show();     } });

定义两个个View，app/view/Grid.js是创建EXT Grid View来显示数据

Ext.define('USERS.view.Grid' , {       extend: 'Ext.grid.Panel',     alias : 'widget.userlist',     title : 'User Contact Info',     store: 'Users',        columns: [{         header: 'Name',         dataIndex: 'name',         flex: 1     },{         header: 'Email',         dataIndex: 'email',         flex: 1     }] });

app/view/Panel.js是创建EXT Panel View来构建Grid的layout

Ext.define('USERS.view.Panel', {     extend: 'Ext.panel.Panel' });

定义一个数据模型(data Model) app/model/User.js

Ext.define('USERS.model.User', {       extend: 'Ext.data.Model',     fields: ['id', 'name', 'email'] });

定义个数据存储(data store) app/store/User.js

var myData = [         [1,	'gloomyfish', 'bfnh1998@hotmail.com'],         [2,	'Bob Denoy', 'bobwindy@yahoo.com'],         [3, 'Rose Kate', 'kittygroup@facebook.com'] ];  Ext.define('USERS.store.Users', {       extend: 'Ext.data.Store',     model: 'USERS.model.User',     autoLoad: true,     data: myData });

位于app同一层次的HTML页面代码如下：

<html>  	<head>  		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  		<title id="page-title">Simple MVC Application</title>  	    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> 	    <style type="text/css"> 			body { 				margin-top: 30px; 				margin-right: 30px; 				margin-bottom: 30px; 				margin-left: 30px; 			} 		</style> 	    <script type="text/javascript" src="extjs/ext-all.js"></script> 		<script type="text/javascript" src="app/app.js"></script>  	</head>  	<body>  	</body>  </html>

运行效果如下：

最简单的ExtJS4的MVC实例_mvc_02