sencha touch Ext.app.Application

Ext.app.Application一般用于app.js中

用来初始化整个应用

可以预先加载controllers(控制器)，models(模型)，stores(数据源)，views(视图)

例如：

1 Ext.application({
2     name: 'MyApp',
3 
4     controllers: ['Users'],
5     models: ['User', 'Group'],
6     stores: ['Users'],
7     views: ['Main', 'ShowUser']
8 });

他们分别对应下面几个js文件

　　app/model/User.js
　　app/model/Group.js
　　app/store/Users.js
　　app/controller/Users.js
　　app/view/Main.js
　　app/view/ShowUser.js

如果应用结构比较复杂，例如在视图文件夹之中还创建了子文件夹，可以如下

1 Ext.application({
2     name: 'MyApp',
3 
4     controllers: ['Users', 'nested.MyController'],
5     views: ['products.Show', 'products.Edit', 'user.Login']
6 });

他们分别对应下面几个js文件

　　app/controller/Users.js
　　app/controller/nested/MyController.js
　　app/view/products/Show.js
　　app/view/products/Edit.js
　　app/view/user/Login.js

以上两种方式结合如下

1 Ext.application({
2     views: ['Auth.view.LoginForm', 'Welcome'],
3     controllers: ['Auth.controller.Sessions', 'Main'],
4     models: ['Auth.model.User']
5 });

他们分别对应下面几个js文件

　　Auth/view/LoginForm.js
　　Auth/controller/Sessions.js
　　Auth/model/User.js
　　app/view/Welcome.js
　　app/controller/Main.js

为了方便管理，我一般只在这里引入控制层，其他的放在对应的控制层，app.js如下

 1 //指定ux起调目录
 2 Ext.Loader.setPath({
 3     'ux': 'app/ux'
 4 });
 5 
 6 Ext.application({
 7     name: 'app',
 8     controllers: ['Main', 'Job', 'User', 'New', 'Img', 'Question', 'Release'],
 9     requires: ['app.config', 'app.util'],
10     //图标  
11     icon: {
12         '57': 'resources/icons/icon.png',
13         '72': 'resources/icons/icon.png',
14         '114': 'resources/icons/icon.png',
15         '144': 'resources/icons/icon.png'  
16     },  
17     //运行图标优先显示  
18     isIconPrecomposed: true,  
19     //不同分辨率对应的启动图片  
20     startupImage: {
21         '320x460': 'resources/startup/splash.png',
22         '640x920': 'resources/startup/splash.png',
23         '768x1004': 'resources/startup/splash.png',
24         '748x1024': 'resources/startup/splash.png',
25         '1536x2008': 'resources/startup/splash.png',
26         '1496x2048': 'resources/startup/splash.png'
27     },  
28     //当所有的引入项加载完成后，执行
29     launch: function() {
30         // Destroy the #appLoadingIndicator element
31         util.inIt();
32         Ext.fly('appLoadingIndicator').destroy();
33     }
34 });

其中值得注意的属性有

　　appFolder 默认值:app 应用目录名称

　　所以我们的主要代码是放在app目录中的，当然也可以改成其他的值，比如test

　　不过更改之后最好如下设置，以免应用出现问题，个人建议默认即可

1 Ext.Loader.setPath({
2     'app': 'test'
3 });

　　name 默认值：app 应用程序名称

　　如果你改成其他的名称，比如test

　　那你注册一个model他的名称应该是类似test.model.user

　　个人建议使用默认值

　　icon 应用启动图标

　　如果使用cmd打包应用，需要配置

　　requires 引入指定js

　　比如全局配置文件，全局共用方法，消息提示组件等

关于Ext.app.Application有其他看法和疑问的欢迎留言探讨