【层级结构】Ext.js5应用层级结构介绍

非英文专业，同时也是Ext.js的初学者，若您能指出错误和不恰当的地方，万分感谢！

原文：https://docs.sencha.com/extjs/5.1/application_architecture/application_architecture.html
Ext.js5同时支持MVC和MVVM两种开发模式。这两种架构都有着类似的核心概念并且都专注于将代码划分的更具有逻辑。每个方法都有其长处，需要根据他们划分的逻辑不同去选择。
一、什么是MVC
MVC架构中，常指Model（模型）,Views(视图),Controllers(控制器)。视图表现模型中的数据，控制器控制这两者之间的数据的变化和更新。
控制器里包含了绝大部分的业务应用逻辑，视图在理想情况下包含一点商业逻辑。模型通常用作数据的结构，也会包含一点逻辑来管理数据的变化。MVC架构的目标就是分清楚每个类所管理的业务逻辑，项目会变得易于测试和维护，代码也能复用。
二、MVVM是什么
MVC和MVVM之间主要的区别是,MVVM有一个称为ViewModel功能的抽象视图。ViewModel展示了模型的数据和视图中数据之间的变化和的演示（即“数据绑定”）。
模型和框架完成尽可能多的工作,最大限度地减少或消除应用程序逻辑，可以直接操纵视图。
三、项目文件结构

四、命名空间
文件路径即名称
五、app.js

Ext.application({
    name: 'MyApp',

    extend: 'MyApp.Application',

    mainView: 'MyApp.view.main.Main'


});

mainView是Ext.js5.1的新属性。通过指定mainView容器类,可以使用任何类作为你的视窗。mainView配置指示应用程序创建指定的视图和附加窗口插件。将视图连接到了文档主体。
六、Application.js
所有的Ext.js应用启动依赖于Application类。下面这段代码使用Sencha Cmd创建项目的时候会自动生成。

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',

    name: 'MyApp',

    stores: [
        // TODO: add global/shared stores here
    ],

    launch: function () {
        // TODO - Launch the application
    }
});

Application类包含了应用的全局设置，比如应用程序的顶层命名空间，共享仓库。
七、Views
视图继承自Ext.Component。视图包含了所有的可视化应用程序结构（即页面UI）。

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',

    xtype: 'app-main',

    controller: 'main',
    viewModel: {
        type: 'main'
    },

    layout: {
        type: 'border'
    },

    items: [{
        xtype: 'panel',
        bind: {
            title: '{name}'
        },
        region: 'west',
        html: '<ul>...</ul>',
        width: 250,
        split: true,
        tbar: [{
            text: 'Button',
            handler: 'onClickButton'
        }]
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Tab 1',
            html: '<h2>Content ...</h2>'
        }]
    }]
});

需要注意的是，视图不包含热河应用逻辑。所有的逻辑都得包含在视图控制器里才行。

控制器和视图模型在其他章节有更加详细的介绍，这里不再赘述。
八、Models和Stores
模型和仓库这两个类是用来处理数据的，比如数据的传递，检索，组织，建模。
模型是用来表示应用程序中的数据类型的。每一个模型都会有文件和函数让应用程序去构建数据的模型。模型和仓库都是结合使用的。仓库可以被数据绑定组件使用，比如网格，树，图。

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'}
    ]
});

模型在描述档案（包括值或者属性），通常使用’fields’,模型类使用fields配置来描述文档类型，在这个例子里面，name被描述为一个字符串类型，age被描述为一个整型。不过这样的声明并不是必须的，如果你并没有包含fields配置，数据也会自动读取并且会加入到数据对象中。不过如果数据需要：变量、默认值、转换函数的时候，你需要定义fields。

仓库
仓库是一个客户端缓存记录（即模板得实例），仓库提供函数来解决排序，过滤和查询等需求。

Ext.define('MyApp.store.User', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    data : [
     {firstName: 'Seth',    age: '34'},
     {firstName: 'Scott', age: '72'},
     {firstName: 'Gary', age: '19'},
     {firstName: 'Capybara', age: '208'}
    ]
});

如果你的整个应用都会用到这个仓库实例，那么你就可以将这个仓库添加到前文降到的Application.js中的store配置中。如下：

stores: [
    'User'
],

在这个例子中，仓库已经包含了数据。不过在真实的案例中，需要在模型或者仓库中用到proxy，proxy这个方法是用来在数据提供者和接受者中传递数据用的。