Sencha Touchメモ – Ext.TabPanel -

Sencha Touch をちまちま触っています。
Sencha Touch を始めようや Sencha Touch Examples を参考に、いろいろとAPIを試している所です。

少しずつ覚えた事を載せていければな～と思います。

まずは、Ext.TabPanelです。

ソースコード

Ext.setup({

	// onReady
	onReady: function() {
		new Ext.TabPanel({
			fullscreen: true,

			// TabBarの設定
			tabBar: {

				// タブを上部に配置
				dock: 'top',

				// スタイル設定
				ui: 'dark',

				layout: {

					// タブを中央寄せ
					pack: 'center'
				}
			},

			// Tab切り替えのアニメーション
			animation: 'slide',

			// 各Panelのデフォルト値設定
			defaults: {

				// スクロールを縦スクロール
				scroll: 'vertical'
			},
			items: [{
				title: 'About',
				html: '
About Page

',
				iconCls: 'info',
				cls: 'card1'
			},{
				title: 'User',
				iconCls: 'user',
				html: '
User Page

',
				cls: 'card2'
			}]
		});
	}
});

プロパティの説明

上記サンプルのTabPanelで使ったプロパティです。
tabBar プロパティでタブの設定、animation プロパティでタブ切り替えのアニメーション、
items プロパティで表示するコンポーネントをそれぞれ指定しています。

Ext.TabPanelのプロパティ

Ext.TabBarのプロパティ

実行

以下のリンクからサンプルを実行できます。
Firefoxだとレイアウトがかなり崩れますが、Google Chromeだと綺麗に見れます。
dock が top の場合
dock が bottom の場合

jsdo.itにも載せてみました。
Sencha Touch – Ext.TabPanel – - jsdo.it

使ったAPIのリンク

Sencha Touch API Documentation – Ext.TabPanel -
Sencha Touch API Documentation – Ext.TabBar -
Sencha Touch API Documentation – Ext.Panel -

Sencha Touchを試してみた

先週ですが、Sencha Touchのベータ版がリリースされましたね。

Introducing Sencha Touch: HTML5モバイル用フレームワーク
先週の2つの発表（SenchaとSencha Touch）の件について

ということで早速、触ってみました。
Hello Worldが表示される簡単なページを作りました。
下の様な画面です。

ソースコード

Ext.setup({
	// apple-mobile-web-app-capableの設定
	fullscreen: true,

	// ホーム画面に登録された場合のアイコン設定
	icon: 'icon.png',

	// iPadからアクセスした場合のスプラッシュ画像
	tabletStartupScreen: 'tablet_startup.png',

	// iPhoneからアクセスした場合のスプラッシュ画像
	phoneStartupScreen: 'phone_startup.png',

	// アイコンの光沢効果を無効
	glossOnIcon: false,

	// ステータスバーを半透明表示
	statusBarStyle: 'black-translucent',

	// onReady
	onReady: function() {
		new Ext.Panel({
			fullscreen: true,
			html: 'Hello Sencha Touch',
			dockedItems: [{
				xtype: 'toolbar',
				ui: 'dark',
				dock: 'top',
				items: [{
					xtype: 'button',
					text: 'Back',
					ui: 'green'
				}]
			}]
		});
	}
});

サンプルではExt.setupでページの起動設定、onReadyプロパティではExt.Panelを生成しています。

サンプルを実行

Ext.setup

Ext.setupはページの起動設定をするメソッドです。以下のプロパティが指定できます。
（試しながら確認したのでたぶんあっているハズ･･･）

• fullscreen：trueにすると、apple-mobile-web-app-capableが有効になる。
• tableStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPad用。
• phoneStartupScreen：フルスクリーン表示時のスプラッシュ画像を指定。iPhoneやiPod Touch用
• statusBarStyle：フルスクリーン表示のときのステータスバー（時計とかバッテリーとか表示されているバー）の表示を指定。”black”（黒）と”black-translucent”（半透明）が指定できる。
• icon：ページをホーム画面に追加したときのアイコンを指定。このプロパティで設定されたアイコンはデバイス共通で使用される。
• tabletIcon：iPad用のアイコン設定
• phoneIcon：iPhone、iPod Touch、Android用のアイコン設定
• glossOnIcon：アイコンに光沢効果を適用するか
• preloadImages：事前にキャッシュしておきたい画像ファイルを配列で指定
• onReady：セットアップ完了後に実行される関数
• scope：onReadyの実行スコープ

所感

簡単にモバイル用のページが作れるのが、単純に楽しいです。

ネイティブアプリの知識なくてもSencha Touchを使えば、
基本的なHTMLやJavaScript、CSSの知識だけで
ネイティブアプリちっくなページが作れるなぁと。

Ext Japanのブログで、Sencha Touch を始めようが公開されているので
次はこれを試してみます。