- Sencha Touch 教程
- Sencha Touch - 首页
- Sencha Touch - 概述
- Sencha Touch - 环境
- Sencha Touch - 命名规范
- Sencha Touch - 架构
- Sencha Touch - MVC 解释
- Sencha Touch - 第一个应用
- Sencha Touch - 构建应用程序
- Sencha Touch - 迁移步骤
- Sencha Touch - 核心概念
- Sencha Touch - 数据
- Sencha Touch - 主题
- Sencha Touch - 设备配置文件
- Sencha Touch - 依赖项
- 环境检测
- Sencha Touch - 事件
- Sencha Touch - 布局
- Sencha Touch - 历史与支持
- Sencha Touch - 上传与下载
- Sencha Touch - 视图组件
- Sencha Touch - 打包
- Sencha Touch - 最佳实践
- Sencha Touch 有用资源
- Sencha Touch - 快速指南
- Sencha Touch - 有用资源
- Sencha Touch - 讨论
Sencha Touch - 设备配置文件
在当今的技术世界中,我们拥有多种设备,例如手机、平板电脑、台式机和笔记本电脑,它们具有不同的屏幕尺寸。因此,需要开发可在所有设备上访问且具有良好外观和感觉的应用程序。但是,为不同的设备开发不同的代码非常耗时且成本高昂。
Sencha Touch 在这方面通过提供设备配置文件功能来帮助我们。根据活动的配置文件,将运行不同的依赖项并应用。
我们在编写应用程序代码时可以声明设备配置文件。我们可以有多个设备,例如:
Ext.application({ name: 'MyApp', profiles: ['Phone', 'Tablet'] });
完成后,配置文件将加载为:
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
编写简单的手机配置文件
Ext.define('Mail.profile.Phone', { extend: 'Ext.app.Profile', config: { name: 'Phone', views: ['phoneView'] }, isActive: function() { return Ext.os.is('Phone'); } });
编写简单的平板电脑配置文件
Ext.define('Mail.profile.Tablet', { extend: 'Ext.app.Profile', config: { name: 'Tablet', views: ['tableView'] }, isActive: function() { return Ext.os.is('Tablet'); } });
正如我们在配置文件中看到的,我们有一个 isActive 函数,它确定特定设备是否处于活动状态。如果设备处于活动状态,则将加载并实例化相应的依赖项。
如上述示例中所述,如果我们使用的是手机设备,则手机配置文件的 isActive 函数将返回 true,并将加载与手机设备相关的依赖项;这里将加载 phoneView。如果设备是平板电脑,则手机配置文件的 isActive 函数将返回 false,而平板电脑配置文件的 isActive 函数将返回 true,并将加载依赖项 tabletView。
启动流程
这里需要注意的另一点是,当我们在应用程序中拥有配置文件时,应用程序代码的加载和实例化将按以下顺序进行:
- 首先实例化控制器,并将加载每个控制器的 init 函数。
- 将调用配置文件的 launch 函数。
- 将调用应用程序的 launch 函数。
配置文件和应用程序的 launch 函数都是可选的,因此如果我们没有定义其中任何一个,它们将不会被调用。
查看以下代码以检查可以在何处以及如何定义不同的 launch 和 init 函数。
控制器的 init 函数
Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', init : function (){ Ext.Msg.alert('Controller's init method'); }, config: { refs: { tab: '#divId } } });
配置文件的 launch 函数
Ext.define('Mail.profile.Tablet', { extend: 'Ext.app.Profile', config: { name: 'Tablet', views: ['tableView'] }, isActive: function() { return Ext.os.is('Tablet'); } launch : function() { Ext.Msg.alert('profile's launch function'); } });
应用程序的 launch 函数
Ext.application({ name: 'Sencha', launch: function() { Ext.Msg.alert(Application's launch function); } });
广告