PhoneGapプロジェクトでSencha Touchを導入するには？という内容です。
PhoneGapについての説明はありません。
Sencha Touchとは？
iPhoneおよびAndroidのようなタッチ端末で利用できるWebアプリ、それもネイティブアプリのような操作性を持つWebアプリを開発するための世界初のHTML5対応JavaScriptフレームワーク。 (公式ページから引用)
Sencha Touchライブラリをダウンロードする ダウンロードページからライブラリをダウンロードします。 商用版とオープンソース版があるので用途によって適宜選択します。 今回はバージョン1.1のオープンソース版をダウンロードしました。
PhoneGapプロジェクトに追加する
ダウンロードしたファイルからsencha-touch-1.1.0ディレクトリを取り出して、プロジェクトのwwwディレクトリ以下に置きます。
index.htmlにsenchaライブラリを読み込むようにします。 head要素に以下を追加します。
[html]
<!-- Sencha TouchのデフォルトCSS -->
<link rel="stylesheet" href="sencha-touch-1.1.0/resources/css/sencha-touch.css" type="text/css">
<!-- Sencha Touchライブラリ -->
<script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch-debug.js"></script>
<!-- <script type="text/javascript" src="sencha-touch-1.1.0/sencha-touch.js"></script> -->
<!-- 自作のアプリ用CSS -->
<link rel="stylesheet" href="sencha-touch-1.1.0//examples/guide/css/guide.css" type="text/css">
<!-- 自作のアプリ用JS -->
<script type="text/javascript" src="index.js"></script>
<!-- Sencha Touch Files End -->
[/html]
Sencha Touchライブラリは、テストやデバッグ環境で動かすときは sencha-touch-debug.js を使い、リリース時には sencha-touch.js を使うようです。
あと、 body 要素無いの記述を消しておきます。
[html]
[/html]アプリケーションをつくる
wwwディレクトリ以下に index.js を作ります。 index.js に次のコードを書きます。
[javascript]
Ext.setup({
icon: 'icon.png', // アイコンファイル
glossOnIcon: false, // アイコンの光沢有り無し
onReady: function() { // 実行する関数
/
* タイムラインの表示
*/
var timeline = new Ext.Component({
title: 'タイムライン', // タイトル
cls: 'timeline', // CSSクラス
scroll: 'vertical', // 縦方向にスクロール
tpl: [ // HTML
' {text}{from_user}
