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.