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: '[e-mail]'}, {id: 2, name: 'Ishan Nanavati', email: '[e-mail]'} ] }

我们的数据是在JSON以上。

转之：