Ext.app.Application简介

ExtJS 版本：6.2.1

简述：

代表性的ExtJS应用程序，通常是用Ext.container.Viewport创建的经典的单页面应用程序。

一个程序由一个或多个视图（View）组成。视图的行为表现由它对应的视图控制器（Ext.app.ViewController）和视图模型（Ext.app.ViewModel）管理。

全局的活动是由控制器（Ext.app.Controller）来调整的，这个控制器基本上是由如下的类（或其子类）的实例来实例化的。

Ext.application({    name: 'MyApp',//将要创建的初始视图的名字。在使用经典工具包的情况下，若这个类没//有继承Ext.ViewPort，它将获得一个“视口”插件。//在使用现代工具包的情况下，主视图（mainView）将被添加到Viewport。    mainView: 'Main.view.main.Main'});

这个实例化的过程由几个步骤组成。首先，它创建一个全局变量，叫做“MyApp”-你程序中所有的类（如它的模板，视图和控制器）将位于此命名空间下。这将会大大降低全局变量命名冲突的可能性。

这个全局的MyApp会有一个getApplication的方法，用来获得当前程序的引用。

var app = MyApp.getApplication();

使用Applicatioin配置程序中的其它部分

 

因为一个Ext.app.Application代表了整个app，我们需要在这里面设置app的其它部分-也就是跟程序绑定在一起的模型，视图和控制器。比如说，我们有一个博客管理程序；我们或许还有用来发帖子和评论的模板和控制器，用来列出，添加及编辑帖子和评论的视图。如下是我们要在Application里面配置的所有东西。

Ext.application({    name: 'Blog',    models: ['Post', 'Comment'],    controllers: ['Posts', 'Comments'],    launch: function() {        ...    }});

注意，我们并没有直接在程序里列出视图。这是因为视图是由控制器来管理的，所以保持这种依赖是明智的。程序将根据路径控制协定加载每个被声明的控制器，这些协定在程序架构导引（一篇文章，地址：http://docs.sencha.com/extjs/6.2.1/guides/application_architecture/application_architecture.html）中列出-这样的话，控制器将会位于路径app/controller/Posts.js和app/controller/Comments.js下。反过来，每个控制器仅仅只需要列出它使用的视图，它们便会自动被加载。我们的帖子控制器会被这样定义：

Ext.define('MyApp.controller.Posts', {    extend: 'Ext.app.Controller',    views: ['posts.List', 'posts.Edit'],    //the rest of the Controller here});

因为我们在程序中配置了我们的模板和控制器，并且在控制器里设置了与之相关的视图，ExtJS将会为我们自动加载我们所有的程序文件。这就意味着，当我们添加一个新类时，我们不需要手动添加script标签到我们的html文件里。但更重要的是，这让我们能够用Sencha Cmd（Ext JS官方构建工具）创建一个我们整个程序的最小化版本。

从Ext.app.Application派生程序

 

通常情况下，程序不能直接从Ext.app.Application派生。当然，通过传递给Ext.application的配置参数，也可以很相像地完成你可能想在派生类中完成的功能。然而，在一些情况中，使用从Ext.app.Application中派生的类才能令人满意地共享程序的逻辑功能。

派生类会按照你的期望正常运行，然而，使用派生类仍然是Ext.application方法的主要功能。

Ext.define('MyApp.Application', {    extend: 'Ext.app.Application',    name: 'MyApp',    ...});Ext.application('MyApp.Application');

关于写Ext JS程序的更多信息，请参看application architecture guide（http://docs.sencha.com/extjs/6.2.1/guides/application_architecture/application_architecture.html）。