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

用来初始化整个应用

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

例如:

 Ext.application({
name: 'MyApp', controllers: ['Users'],
models: ['User', 'Group'],
stores: ['Users'],
views: ['Main', 'ShowUser']
});

他们分别对应下面几个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

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

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

他们分别对应下面几个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

以上两种方式结合如下

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

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

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

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

 //指定ux起调目录
Ext.Loader.setPath({
'ux': 'app/ux'
}); Ext.application({
name: 'app',
controllers: ['Main', 'Job', 'User', 'New', 'Img', 'Question', 'Release'],
requires: ['app.config', 'app.util'],
//图标
icon: {
'57': 'resources/icons/icon.png',
'72': 'resources/icons/icon.png',
'114': 'resources/icons/icon.png',
'144': 'resources/icons/icon.png'
},
//运行图标优先显示
isIconPrecomposed: true,
//不同分辨率对应的启动图片
startupImage: {
'320x460': 'resources/startup/splash.png',
'640x920': 'resources/startup/splash.png',
'768x1004': 'resources/startup/splash.png',
'748x1024': 'resources/startup/splash.png',
'1536x2008': 'resources/startup/splash.png',
'1496x2048': 'resources/startup/splash.png'
},
//当所有的引入项加载完成后,执行
launch: function() {
// Destroy the #appLoadingIndicator element
util.inIt();
Ext.fly('appLoadingIndicator').destroy();
}
});

其中值得注意的属性有

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

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

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

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

  

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

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

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

  个人建议使用默认值

  

  icon 应用启动图标

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

  requires 引入指定js

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

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

  

  

  

sencha touch Ext.app.Application的更多相关文章

  1. Ext.app.Application

    代表性的ExtJS应用程序,通常是用Ext.container.Viewport创建的经典的单页面应用程序. 一个程序由一个或多个视图(View)组成.视图的行为表现由它对应的视图控制器(Ext.ap ...

  2. 初探 Ext JS 6 (sencha touch/ext升级版)

    Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/product ...

  3. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  4. sencha touch Ext.Ajax.request 错误 Cannot call method 'request' of undefined 解决方案

    凡是Cannot call method '' of undefined 这类错误大部分都可以参照下面的办法来解决 在st中有时候你会发现使用Ext.Ajax.request会出现一下错误: Cann ...

  5. sencha touch/Ext Js 6 + 自定义扩展的用法

    app.js中加入以下代码 //指定ux起调目录 Ext.Loader.setPath({ 'ux': 'app/ux' }); 在app目录中创建一个ux文件夹 假如我们使用这个扩展,扩展地址:ht ...

  6. sencha touch的开源插件和例子

    写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...

  7. (转)Sencha Touch和jQuery Mobile的比较

    原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...

  8. Sencha Touch 和 jQuery Mobile 的比较

    Sencha Touch 和 jQuery Mobile 的比较 英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 1 ...

  9. sencha touch 入门系列 (六)sencha touch运行及代码解析(下)

    接着上一讲,通过index.html里development.js对app.json里js资源文件的解析,app.js便被index.html引入了, app.js是整个项目的程序入口,在项目完成时使 ...

随机推荐

  1. C# 异常和异常处理

    C# 语言的异常处理功能可帮助您处理程序运行时出现的任何意外或异常情况. 异常处理使用 try.catch 和 finally 关键字尝试某些操作,以处理失败情况,尽管这些操作有可能失败,但如果您确定 ...

  2. [mysql] mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in

    From: http://www.ttlsa.com/php/deprecated-mysql-connect/ php 5个版本,5.2.5.3.5.4.5.5,怕跟不上时代,新的服务器直接上5.5 ...

  3. vue项目中使用md5.js及base64.js

    一.在项目根目录下安装 npm install --save js-base64 npm install --save js-md5 二.在项目文件中引入 import md5 from 'js-md ...

  4. MyEclipse连接CVS,如果中间经过一层代理,就没法直接联接到CVS了,哪位知道怎么办?

  5. 消息队列之 RabbitMQ

    https://www.jianshu.com/p/79ca08116d57 关于消息队列,从前年开始断断续续看了些资料,想写很久了,但一直没腾出空,近来分别碰到几个朋友聊这块的技术选型,是时候把这块 ...

  6. datepicker clone 控件错误

    删除id,并删除hasDatepicker //+ -  function changeRows(sender,desc){ var tr = $(sender).closest("tr&q ...

  7. Oracle 高级查询

    Oracle SQL 一些函数用法 以下sql环境都是在 Oracle 11g/scott完成 Group by 与GROUP BY一起使用的关建字 GROUPING,GROUP SET,ROLLUP ...

  8. Vue-router路由判断页面未登录跳转到登录页面

    router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...

  9. Apache伪静态配置,支持.htaccess配置方法

    第一.编辑httpd.conf文件 A - 在etc/httpd/conf/目录下的httpd.conf 文件,找到: LoadModule rewrite_module modules/mod_re ...

  10. 基于jQuery的tooltips插件--poshytip

    摘要: 分享一款在项目中使用的tooltips插件--poshytip,这是一款基于jQuery的插件,其特点是简单易用,支持浏览器:IE6+, FF 2+, Opera 9+, Safari 3+, ...