📅  最后修改于: 2020-10-19 03:03:59             🧑  作者: Mango
在当今的技术世界中,我们拥有多种设备,例如具有不同屏幕尺寸的移动设备,平板电脑,台式机和笔记本电脑。因此,需要开发可从所有设备以良好的外观和感觉访问的应用程序。但是,为不同的设备开发不同的代码非常耗时且昂贵。
Sencha Touch通过提供设备配置文件功能在这方面为我们提供了帮助。基于活动配置文件,将运行并应用不同的依赖项。
我们可以在编写应用程序代码时声明设备配置文件。我们可以有多个设备,如-
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
完成后,配置文件将加载为-
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。
还有一点需要注意的是,当我们在应用程序中有配置文件时,应用程序代码的加载和实例化将按以下顺序进行:
概要文件和应用程序的启动功能都是可选的,因此,如果我们未定义它们中的任何一个,则不会调用它们。
看一下以下代码,检查可以在何处以及如何定义不同的启动和初始化函数。
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});
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');
}
});
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});