extJs4中Application概述

Application代表一个Ext JS 4应用程序,它通常是一个使用视口的单页应用程序。一个典型的Ext.app.Application可能看起来像这样。

Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: {
                html: 'My App'
            }
        });
    }
});

这可以做几件事。首先,它创建一个名为“MyApp”的全局变量——应用程序的所有类(如其模型、视图和控制器)都将位于这个名称空间下,这大大降低了全局变量发生冲突的可能性。MyApp global还将有一个getApplication方法来获取对当前应用程序的引用:

var app = MyApp.getApplication();

当页面准备就绪且所有JavaScript都已加载时,将调用应用程序的启动函数,此时您可以运行启动应用程序的代码。通常这包括创建一个视口,就像我们在上面的例子中所做的那样。

向应用程序介绍应用程序的其余部分

因为一个Ext.app。应用程序代表整个应用程序,我们应该告诉它应用程序的其他部分,即与应用程序捆绑的模型、视图和控制器。假设我们有一个博客管理应用程序;我们可能有用于帖子和评论的模型和控制器,以及用于列出、添加和编辑帖子和评论的视图。下面是我们如何告诉我们的应用程序所有这些事情:

Ext.application({
    name: 'Blog',
    models: ['Post', 'Comment'],
    controllers: ['Posts', 'Comments'],

    launch: function() {
        ...
    }
});

请注意,我们实际上并没有在应用程序本身中直接列出视图。这是因为视图是由控制器管理的,所以保留这些依赖关系是有意义的。应用程序将使用《应用程序体系结构指南》中列出的路径约定加载每个指定的控制器——在这种情况下,希望控制器驻留在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
});

因为我们告诉我们的应用程序关于我们的模型和控制器,以及我们的控制器关于他们的视图,Ext JS将自动为我们加载所有的应用程序文件。这意味着我们不必在添加新类时手动将脚本标记添加到html文件中,但更重要的是,它使我们能够使用Sencha Cmd创建整个应用程序的最小化构建。

源自Ext.app应用

通常,应用程序不会直接从Ext.app派生。应用相反,传递给Ext.application的配置模拟了在派生类中可能执行的操作。然而,在某些情况下,通过使用Ext.app的派生类共享逻辑是可取的。应用

派生的工作原理与您预期的一样,但是使用派生类仍然应该是Ext.application方法的工作。

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

Ext.application('MyApp.app.Application');

For more information about writing Ext JS 4 applications, please see the application architecture guide.

本页面,翻译自:Ext.app.Application – Ext JS – Sencha Docs

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注