我在Sencha Touch 2.1中编写了一个应用程序，其中我将一个包嵌入到Cordova/PhoneGap 2.5.0中，并在xCode中编译以在iOS模拟器/iOS上运行。我已经将PGSQLite插件添加到PhoneGap，并为Sencha构建了我自己的PhoneGap/SQLite代理，我在我的几个商店中使用了它。*
问题:当我将一个包嵌入到PhoneGap并在iOS模拟器中运行时，我看到在Sencha初始化之前Cordova没有加载。我看到这是因为我在Sencha应用程序中调用我在代理初始化中制作的Cordova.exec导致一个错误，告诉我无法找到Cordova对象。
我确实成功地在我的应用程序中使用Cordova.exec来运行像PhoneGap的Childbrowser插件这样的东西，并且它有效。但是在应用程序执行的早期阶段使用Cordova.exec，即初始化，太快了，无法保证Cordova对象将被实例化。
已经尝试:我已经尝试了以下方法:
-
我尝试简单地将Sencha应用的开发者构建嵌入到PhoneGap中。虽然这是有效的，但我不想将我的开发构建部署为我发布的应用程序，因为它效率低下并且占用大量空间。然而，我从这个实验中了解到，Sencha Touch微加载程序在包和生产构建上的工作方式是在Sencha之后加载PhoneGap。在包构建中加载Sencha后检查DOM时可以清楚地看到这一点。
-
我已经配置了我的
app.json文件，包括PhoneGap和app.js和Sencha Touch框架之前的插件。玩与我的JS文件引用的顺序在我的app.json没有 -
我还尝试创建一个脚本加载器，如下所述(StackOverflow)。然后我运行了Cordova的脚本加载器，然后这个回调，运行我插件的脚本加载器，然后最后，在那个的回调中，运行Sencha Touchmicroloader。这导致了一个错误。此外，我不得不在Sencha构建我的
index.html文件后，手动设置它包中。
我正在寻找的:我正在寻找以下答案:
-
是否有一种方法可以配置Sencha的微加载器或我的Sencha应用程序，以便在Sencha的微加载器运行之前确保Cordova加载?
-
是否有一种方法来设置这样使用Sencha Cmd仍然有效，我不需要hack around在我的index.html文件后，我建立的应用程序?
注意:*请不要建议我使用现有的，所谓的SQLite代理Sencha。我特别选择了我的方法，因为虽然我很欣赏Sencha Touch 2的SQLite代理的现有工作(即，这个)，它实际上是一个WebSQL代理，不存储在iOS上的SQLite原生。我的代理使用PhoneGap的PGSQLite插件在iOS上的SQLite中本地存储数据。当我有机会清理它并从我的代码中解开它时，我计划将其开源。
我最终通过构建一个自定义加载器自己解决了这个问题。我不确定是否有一种更Sencha-ish的方式来做到这一点，但这里是我所做的工作的细节，这确实有效，以防其他人想确保PhoneGap在在Sencha中运行任何东西之前完全加载在包和生产构建中。(这可能是PhoneGap打包Sencha应用程序的所有情况)。
My index.html文件:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<!-- Load Cordova first. Replace with whatever version you are using -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
// Check for whatever mobile you will run your PhoneGap app
// on. Below is a list of iOS devices. If you have a ton of
// devices, you can probably do this more elegantly.
// The goal here is to only listen to the onDeviceReady event
// to continue the load process on devices. Otherwise you will
// be waiting forever (literally) on Desktops.
if ((navigator.platform == 'iPad') ||
(navigator.platform == 'iPhone') ||
(navigator.platform == 'iPod') ||
(navigator.platform == 'iPhone Simulator') ||
(navigator.platform == 'iPadSimulator')
) {
// Listening for this event to continue the load process ensures
// that Cordova is loaded.
document.addEventListener("deviceready", onDeviceReady, false);
} else {
// If we're on Desktops, just proceed with loading Sencha.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
}
};
// This function is a modified version of the one found on
// StackOverflow, here: http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded#answer-756526
// Using this allows you to wait to load another script by
// putting the call to load it in a callback, which is
// executed only when the script that loadScript is loading has
// been loaded.
function loadScript(url, callback)
{
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
// Attach handlers for all browsers
var done = false;
script.onload = script.onreadystatechange = function()
{
if( !done && ( !this.readyState
|| this.readyState == "loaded"
|| this.readyState == "complete") )
{
done = true;
// Continue your code
callback();
}
};
head.appendChild(script);
}
function onDeviceReady() {
console.log("[PhoneGap] Device initialized.");
console.log("[PhoneGap] Loading plugins.");
// You can load whatever PhoneGap plugins you want by daisy-chaining
// callbacks together like I did with pgsqlite and Sencha.
loadScript('pgsqlite_plugin.js', function() {
console.log("[Sencha] Adding loader.");
// The last one to load is the custom Sencha loader.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
});
};
</script>
<meta charset="UTF-8">
<title>Sencha App</title>
</head>
<!-- Don't forget to call onBodyLoad() in onLoad -->
<body onLoad="onBodyLoad();">
</body>
</html>
接下来，在文档根目录下的loader.js中创建一个自定义加载器，与index.html一起。这个很大程度上基于Sencha自带的开发微加载器。非常感谢他们:
console.log("Loader included.");
(function() {
function write(content) {
document.write(content);
}
function meta(name, content) {
write('<meta name="' + name + '" content="' + content + '">');
}
var global = this;
if (typeof Ext === 'undefined') {
var Ext = global.Ext = {};
}
var head = document.getElementsByTagName("head")[0];
var xhr = new XMLHttpRequest();
xhr.open('GET', 'app.json', false);
xhr.send(null);
var options = eval("(" + xhr.responseText + ")"),
scripts = options.js || [],
styleSheets = options.css || [],
i, ln, path;
meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
meta('apple-mobile-web-app-capable', 'yes');
meta('apple-touch-fullscreen', 'yes');
console.log("Loading stylesheets");
for (i = 0,ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
path = path.path;
}
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = path;
head.appendChild(stylesheet);
}
for (i = 0,ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
path = path.path;
}
var script = document.createElement("script");
script.src = path;
head.appendChild(script);
}
})();
注意，index.html文件不包含#microloader script元素。这是因为你应该把它拿出来，使用你的自定义加载器。
有了所有这些，你将能够顺利地运行，知道整个PhoneGap环境在你的Sencha javascript开始做事情之前已经到位。