Free Writing

7月 21ST, 2010
By ISPERN

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のプロパティ

プロパティ	説明
tabBar	Ext.TabBarのプロパティをオブジェクトリテラルで指定する。 ※下記、Ext.TabBarのプロパティを参照。
tabBarPosition	タブを配置する場所を指定する。指定できる値は ‘top’ , ‘bottom’ ※’left’ , ‘right’ も指定できるけど、とりあえず動くという感じ。
ui	タブのテーマを指定。指定できる値は ‘light’ , ‘dark’ , ‘metal’
animation	タブを切り替えるときのアニメーションを指定。指定できるアニメーションは、 ‘fade’ , ’slide’ , ‘flip’ , ‘cube’ , ‘pop’ , ‘wipe’。 kitchensinkのアニメーションで動きを確認できる。
sortable	true にすると、タブをホールドしてドラッグすることができる。
activeItem	初期表示でアクティブにするコンポーネントを items のインデックスで指定する。
items	表示するコンポーネントを配列で指定。

Ext.TabBarのプロパティ

プロパティ	説明
dock	Ext.TabPanel の tabBarPosition と同様。
layout	Ext.TabBarのレイアウトの設定。上記サンプルコードでは、pack プロパティでタブの配置位置を指定している。 ’start’ , ‘center’ , ‘end’を指定できる。
ui	Ext.TabPanel の ui と同様。
sortHoldThreshold	タブのホールド時間をミリ秒で指定する。指定した時間の間、タブをホールドすると、ドラッグ可能になる。デフォルトは300ミリ秒。