Sencha Touchメモ – Ext.TabPanel -

Sencha Touch をちまちま触っています。
Sencha Touch を始めようSencha Touch Examples を参考にいろいろとAPIを試している所です。
少しずつ覚えた事を載せていければな~と思います。

まずは、Ext.TabPanelです。

ソースコード

プロパティの説明

上記サンプルの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ミリ秒。

実行

以下のリンクからサンプルを実行できます。
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 -