最简单的ExtJS4的MVC实例

最新推荐文章于 2013-03-08 14:05:18 发布

iteye_3606

最新推荐文章于 2013-03-08 14:05:18 发布

阅读量203

点赞数

文章标签：测试前端 javascript ViewUI

最简单的ExtJS4的MVC实例

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

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

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

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

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

每个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>

运行效果如下：

参考引用 -http://www.sencha.com/learn/the-mvc-application-architecture/

2012-08-11

iteye_3606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最简单的ExtJS4的MVC实例

最简单的ExtJS4的MVC实例从ExtJS4.0开始，ExtJS支持MVC架构，让前端开发者更好的实现数据与逻辑分离，使用View, Controller, Model组件定义来完成浏览器前端业务。提高代码可以维护性。ExtJS中的View是被动模式，被Controller持有。一个最简单的基于ExtJS4的MVC的App实例，有Contoller， V...
复制链接

扫一扫