青鸾有信频须及翻译:ExtJs4之简单MVC应用

我们的 简单MVC应用 具有以下文件夹结构：

simplemvc/Index.html

我们的HTML文件中包含 ext- all.css 其中包含所有的样式， ext all.js 包含所有的应用程序库和任何所需的Ext JS的 app.js 其中包含应用程序类。 Ext JS的提供工具，使我们能够产生（）JSBuilder文件格式的文件JSB3所有依赖关系的形式一，营造一个最小的自定义生成的正是我们的应用需求，但我们不打算使用，在这个例子并包括 ext- all.js 其中包含所需的一切。

simplemvc/app.js

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

Ext JS的每4个应用程序级开始应用的实例，这个类包含应用程序的全局设置的，它也包含一个发射功能，它运行时自动加载的一切。 我们的应用程序类包含属性 名称 定义了我们的应用程序的全局命名空间。 在默认情况下申请财产 autoCreateViewport 设置为 真 ，因此它会自动创建一个视口，但我们只想要一个根格在一个文档，所以我将其设置为 假 。 控制器 应用程序中的属性列表所有控制器。

simplemvc/controller/Users.js

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

主控制器的作用是监听事件，并采取一些行动。 所有的控制器继承父 Ext.app.Controller ，模型 财产清单所有的模型，它定义了协会的数据和格式， 存储 列出所有的商店，它定义了数据或获取并从服务器 的意见 ，列出了所有的意见在我们的应用需要它的网格。

simplemvc/model/User.js

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

模型定义了数据格式和协会，我们的数据有编号，姓名和电子邮件.

simplemvc/store/Users. js

Ext.define('USERS.store.Users', {extend: 'Ext.data.Store',model: 'USERS.model.User',autoLoad: true,proxy: {type: 'ajax',api: {read: 'data/users.json'},reader: {type: 'json',root: 'users',successProperty: 'success'}}});

从我们的商店获取我们前面定义的模型为基础的服务器数据

simplemvc/view/Panel.js

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

该面板是用来作为网格组件容器。

simplemvc/view/Grid.js

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

我们的网格视图中有两列 名 和 电子邮件 ，并显示数据存储获取的 用户 ，我们前面定义

simplemvc/data/users.json

{success: true,users: [{id: 1, name: 'Amit Sidhpura', email: 'amit@extjsframework.com'},{id: 2, name: 'Ishan Nanavati', email: 'ishan@extjsframework.com'}]}

我们的数据是在JSON以上。