デスクトップを使ってテストするために、一週間ずっと Sencha Touch 2 アプリを書いていました。私は今、それを PhoneGap と統合して、iOS シミュレーターと物理 iOS デバイスの両方でテストしようとしました。
ST2 アプリが「起動」を開始していることを確認でき、アプリがまだデスクトップ上で動作することを確認しました... しかし、Ext.viewport.add(...) が画面を更新しているようには見えません (デフォルト青色/点滅ドットローダーは引き続き表示されます)。
私の index.html は次のようになります。
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Yoga Journal's FindYoga</title>
<link href="resources/css/app.css" type="text/css" rel="stylesheet" />
<style type="text/css">
/* trimmed css */
</style>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script id="microloader" type="text/javascript" src="sdk/sencha-touch.js"></script>
<script id="microloader" type="text/javascript" src="all-classes.js"></script>
<script id="microloader" type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
私の app.js は次のようになります。
Ext.application({
name: 'YogaNow',
controllers: ['Main', 'C1','C2','C3'],
views: ['Main'],
stores: ['S1', 'S2', 'S3','S4'],
models: ['M1', 'M2', 'M3','M4'],
launch: function() {
console.log('launch');
Ext.Viewport.add({
xtype: 'mainpanel',
});
},
});
if(Ext.os.deviceType == 'Desktop') {
setTimeout(function() {
var e = document.createEvent('Events');
e.initEvent('deviceready');
document.dispatchEvent(e);
}, 250);
}
前述のように、アプリはデスクトップ上で正常に (エラーなしで) 実行されます。index.html から cordova 参照を削除し、「if(Ext.os.deviceType) {...}」をコメント アウトすると、iOS (シミュレーターおよびデバイス) の Safari でもエラーなしで実行されます。
cordova への参照を削除すると、アプリは、シミュレーターまたはデバイス上で実行されたときに、PhoneGap/Cordova シェルでも機能します。
cordova-2.0.0.js をインクルードしてから Xcode でビルドすると、ST2 コードがビューを更新しないのはなぜですか?