フレームワークのダウンロード

以下のURLの「Download Now」からフレームワークをダウンロードしましょう。
今回は現時点で最新である「beta-0.91」を使用します。

http://www.extjs.co.jp/

ダウンロードした「sencha-touch-beta-0.91」フォルダから「ext-touch.js」と「resources→css」フォルダの中の「ext-touch.css」をコピーして適当なフォルダに入れておきます。

タブアプリ完成イメージ

demo

タブで切り替わるアプリを作ってみる。

タブで切り替えてhtmlを表示するという簡単なアプリを作ってみたいと思います。
まずはファイルを作成しましょう。
ベースとなる「index.html」、前述のコアプログラムである「ext-touch.js」「ext-touch.css」それに新たにタブアプリのプログラムを記述することになる、「tab.js」「tab.css」の5つを一つのフォルダに入れます。
「ext-touch.js」「ext-touch.css」はまったくいじる必要はないので、「index.html」「tab.js」「tab.css」を作っていきましょう。

ベースとなる「index.html」の作成

処理やテキストなどはJavaScriptに記述することになるので、ここでは各ファイルを読み込むだけです。

index.html

  1. 		<!DOCTYPE html>
  2. 		<html>
  3. 		<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
  5. 		<title>タブアプリ</title>
  6. 		<link rel="stylesheet" href="css/ext-touch.css" type="text/css">
  7. 		<link rel="stylesheet" href="css/tab.css" type="text/css">
  8. 		<script type="text/javascript" src="js/ext-touch.js"></script>
  9. 		<script type="text/javascript" src="js/tab.js"></script>
  10. 		</head>
  11. 		<body></body>
  12. 		</html>
  13.

「tab.js」の作成

tab.js

  1. 		Ext.setup({
  2. 			// アイコン設定
  3. 			icon: 'img/icon.png',
  4. 			// アイコンの光沢設定
  5. 			glossOnIcon: true,
  6. 			//スプラッシュ画像（iPad）
  7. 			tabletStartupScreen: 'img/tablet_startup.png',
  8. 			//スプラッシュ画像（iPhone）
  9. 			phoneStartupScreen: 'img/phone_startup.png',
  10. 			onReady: function() {
  11. 				new Ext.TabPanel({
  12. 					fullscreen: true,
  13. 					items: [{
  14. 						title: 'Tab 1',
  15. 						html: '<h1>１番タブです。</h1><p>はははは。</p>',
  16. 						cls: 'tab1'
  17. 					}, {
  18. 						title: 'Tab 2',
  19. 						html: '<h1>2番タブです。</h1><p>ほほほおほ。</p>',
  20. 						cls: 'tab2'
  21. 					}, {
  22. 						title: 'Tab 3',
  23. 						html: '<h1>3番タブです。</h1><p>ふふふふふふふふふ。</p>',
  24. 						cls: 'tab3'
  25. 					}]
  26. 				});
  27. 			}
  28. 		});
  29.

2-9行目

初期設定をしています。
コメントの通りですが、ブックマークしたときホームに表示されるアイコンと、アイコンから起動したときのスプラッシュ画像などの指定ができます。

2-9行目

ここでタブの処理をしています。
色々設定できますが、最低でもfullscreenをtrueにしないと表示されないようです。
itemsには必要なタブの数だけどんどん追加していきましょう。

title タブに表示されるテキスト。
html コンテンツをhtmlで記述します。
cls cssのクラス名指定

「tab.css」の作成

最後にスタイルシートです。
これは「tab.js」で「tab1」「tab2」「tab3」とクラスを指定したので、好きなように装飾してくだけですね。
わかりやすいようにバックグランドの色をそれぞれ変えてみました。

tab.css

  1. 		.tab1, .tab2, .tab3 {
  2. 			padding: 20px;
  3. 			font-size: 30px;
  4. 		}
  5. 		.tab1 {
  6. 			background: #39C;
  7. 		}
  8. 		.tab2 {
  9. 			background: #F99;
  10. 		}
  11. 		.tab3 {
  12. 			background: #399;
  13. 		}
  14. 		p {
  15. 			font-size: 20px;
  16. 		}
  17.