Sencha touch 2 Sencha Touch 2中的配置文件功能导致生产模式构建出现问题
我已经创建了一个Sencha Touch 2应用程序,并构建了一个生产模式版本。然而,我遇到了一个大问题,生产构建和它在手机/平板电脑模式下运行 ST2当前的配置文件实现似乎有缺陷,因为即使激活了特定的配置文件,所有视图仍会加载到中。在我的应用程序中,我希望能够使用视图配置中的xtype别名指定视图,并在没有任何特殊编码的情况下加载手机或平板电脑配置文件的正确视图。如果已加载配置文件中的所有视图,则此操作无法工作(一个视图将始终覆盖另一个视图) 实现这一点的唯一方法是在启动阶段(在app.js中)动态添加配置文件,如下所示: 这很有效。这意味着我可以加载正确的视图,并且仍然在另一个视图和/或控制器中的ref的配置中使用xtype别名。但是,我注意到,当我生成生产构建并加载控制台窗口时,定义了以下两个方面:Sencha touch 2 Sencha Touch 2中的配置文件功能导致生产模式构建出现问题,sencha-touch-2,sencha-touch-2.1,Sencha Touch 2,Sencha Touch 2.1,我已经创建了一个Sencha Touch 2应用程序,并构建了一个生产模式版本。然而,我遇到了一个大问题,生产构建和它在手机/平板电脑模式下运行 ST2当前的配置文件实现似乎有缺陷,因为即使激活了特定的配置文件,所有视图仍会加载到中。在我的应用程序中,我希望能够使用视图配置中的xtype别名指定视图,并在没有任何特殊编码的情况下加载手机或平板电脑配置文件的正确视图。如果已加载配置文件中的所有视图,则此操作无法工作(一个视图将始终覆盖另一个视图) 实现这一点的唯一方法是在启动阶段(在app.js中
MyTestApp.views.phone.Login
MyTestApp.views.tablet.Login
通常情况下,平板电脑或手机版本将根据配置文件进行定义。我假设是这样的,因为生产模式构建已经解析了所有依赖项,然后包含了所有视图,而不管配置文件如何
因此,在我的启动控制器中,我有一个按钮处理程序,然后从xtype创建一个登录视图
控制器:
refs: {
loginView: {
selector: 'loginview',
xtype: 'loginview',
autoCreate: true
}
}
处理程序:
var loginView = this.getLoginView();
在开发模式下,loginView变量将是MyTestApp.views.tablet.Login或MyTestApp.views.phone.Login,具体取决于配置文件
我如何确保此处实例化的loginview在生产模式下根据配置文件获得正确的版本?对于所有想知道我是如何解决此问题的人,我现在在拔完所有头发后秃顶;) 我希望xtype名称所在的所有配置文件视图保持不变,即使它们可能属于手机或平板电脑配置文件,我必须删除类上的别名/xtype配置。然后,我有一个配置文件基类,它是这样定义的,带有一个共享的helper函数:
Ext.define('MyApp.profile.Base', {
extend: 'Ext.app.Profile',
config: {
},
mapViewAliases: function () {
var self = this;
var views = this.getDependencies().view;
var newAliasMap = null;
Ext.each(views, function (view) {
Ext.Array.some(self.getViewsToAliasMap(), function (map) {
if (map[view]) {
if (!newAliasMap) {
newAliasMap = {};
}
newAliasMap[view] = [map[view]];
return true;
}
});
});
if (newAliasMap) {
console.log('view aliases being mapped for: ' + this.$className);
Ext.ClassManager.addNameAliasMappings(newAliasMap)
}
}
});
然后我让profile类继承自基类(这在tablet配置文件中重复,但viewsToAliasMap保存属于tablet配置文件而不是电话配置文件的类除外):
因此,概要文件基本上在启动函数的基类上调用函数mapViewAlias()。MapViewAlias()使用类管理器中配置文件中定义的别名注册视图类名。因此,有效地在运行时解析xtype名称
我相信这段代码可以得到改进和/或更好的实现方法。
请随时告诉我。我正在使用一个非常简单的实现。。。我相信它可以变得更健壮,但我已经在这方面做了5个小时左右了
Ext.define('MyApp.override.Application', {
override : 'Ext.app.Application',
onProfilesLoaded: function() {
var profiles = this.getProfiles(),
length = profiles.length,
instances = [],
requires = this.gatherDependencies(),
current, i, profileDeps;
for (i = 0; i < length; i++) {
var instance = Ext.create(profiles[i], {
application: this
});
/*
* Note that we actually require all of the dependencies for all Profiles - this is so that we can produce
* a single build file that will work on all defined Profiles. Although the other classes will be loaded,
* the correct Profile will still be identified and the other classes ignored. While this feels somewhat
* inefficient, the majority of the bulk of an application is likely to be the framework itself. The bigger
* the app though, the bigger the effect of this inefficiency so ideally we will create a way to create and
* load Profile-specific builds in a future release.
*
CMK - PSHAW!
*/
if (instance.isActive() && !current) {
console.log('Profile active: ' + instance.getName());
current = instance;
profileDeps = instance.getDependencies();
requires = requires.concat(profileDeps.all);
var ns = instance.getNamespace();
this.setCurrentProfile(current);
// Merge Controllers, Models, Stores, and Views
this.setControllers(this.getControllers().concat(profileDeps.controller));
this.setModels(this.getModels().concat(profileDeps.model));
this.setStores(this.getStores().concat(profileDeps.store));
this.setViews(this.getViews().concat(profileDeps.view));
// Remove the view ref and requires for default views, when a profile specific one exists
Ext.each(profileDeps.view, function(className) {
if (className.indexOf('view.' + ns + '.') !== -1) {
// Requires
var index = requires.indexOf(className.replace('view.' + ns, 'view'));
if (index !== -1) {
requires.splice(index, 1);
}
// Views
index = this.getViews().indexOf(className.replace('view.' + ns, 'view'));
if (index !== -1) {
this.getViews().splice(index, 1);
}
}
}, this);
instances[0] = instance;
break;
}
}
this.setProfileInstances(instances);
Ext.require(requires, this.loadControllerDependencies, this);
}
});
Ext.define('MyApp.override.Application'{
覆盖:“Ext.app.Application”,
onProfilesLoaded:function(){
var profiles=this.getProfiles(),
长度=外形。长度,
实例=[],
requires=this.gatherDependencies(),
当前,i,profileDeps;
对于(i=0;i
把这个放在你的Ext.application之前,它将替换配置文件加载器。。。这
Ext.define('MyApp.profile.Phone', {
extend: 'MyApp.profile.Base',
config: {
name: 'Phone',
views: ['Login', 'Home', 'Welcome' ],
viewsToAliasMap: [
{ 'MyApp.view.phone.Login': 'widget.loginview' },
{ 'MyApp.view.phone.Home': 'widget.homeview' },
{ 'MyApp.view.phone.Welcome': 'widget.welcomeview' }
]
},
isActive: function () {
return Ext.os.is.Phone;
},
launch: function () {
console.log("Phone profile launched");
this.mapViewAliases();
}
});
Ext.define('MyApp.override.Application', {
override : 'Ext.app.Application',
onProfilesLoaded: function() {
var profiles = this.getProfiles(),
length = profiles.length,
instances = [],
requires = this.gatherDependencies(),
current, i, profileDeps;
for (i = 0; i < length; i++) {
var instance = Ext.create(profiles[i], {
application: this
});
/*
* Note that we actually require all of the dependencies for all Profiles - this is so that we can produce
* a single build file that will work on all defined Profiles. Although the other classes will be loaded,
* the correct Profile will still be identified and the other classes ignored. While this feels somewhat
* inefficient, the majority of the bulk of an application is likely to be the framework itself. The bigger
* the app though, the bigger the effect of this inefficiency so ideally we will create a way to create and
* load Profile-specific builds in a future release.
*
CMK - PSHAW!
*/
if (instance.isActive() && !current) {
console.log('Profile active: ' + instance.getName());
current = instance;
profileDeps = instance.getDependencies();
requires = requires.concat(profileDeps.all);
var ns = instance.getNamespace();
this.setCurrentProfile(current);
// Merge Controllers, Models, Stores, and Views
this.setControllers(this.getControllers().concat(profileDeps.controller));
this.setModels(this.getModels().concat(profileDeps.model));
this.setStores(this.getStores().concat(profileDeps.store));
this.setViews(this.getViews().concat(profileDeps.view));
// Remove the view ref and requires for default views, when a profile specific one exists
Ext.each(profileDeps.view, function(className) {
if (className.indexOf('view.' + ns + '.') !== -1) {
// Requires
var index = requires.indexOf(className.replace('view.' + ns, 'view'));
if (index !== -1) {
requires.splice(index, 1);
}
// Views
index = this.getViews().indexOf(className.replace('view.' + ns, 'view'));
if (index !== -1) {
this.getViews().splice(index, 1);
}
}
}, this);
instances[0] = instance;
break;
}
}
this.setProfileInstances(instances);
Ext.require(requires, this.loadControllerDependencies, this);
}
});
Ext.define('MyApp.view.CatalogView', {
extend: 'Ext.Container',
alias: 'widget.catalogview'
});
Ext.define('MyApp.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['CatalogView'],
},
isActive: function() {
return Ext.os.is('Phone');
},
launch: function() {
Ext.ClassManager.setAlias('MyApp.view.phone.CatalogView', 'widget.catalogview');
}
});