ExtJSで楽しくRIA業務アプリ開発

Ext.Panelを使うと、ExtJSの画面構成の基礎となるプレーンなパネルを生成することができました、ExtJSで用意されているウィジットには様々な機能を持ったパネルクラスが用意されています。今回はExt.TabPanelクラスを取り上げます。

ExtJS入門8 Ext.Panelについて2 autoTabsとcontentElを使ってタブパネルを作る。
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial8/

Ext.TabPanel
ExtJS -3.0 日本語APIドキュメント – Ext.TabPanel
http://extdocs.xenophy.com/?class=Ext.TabPanel

継承は以下のように行われています

Observable > Component > BoxComponent > Container > Panel > TabPanel

Ext.TabPanelパネルのサブクラスの一つです。パネルの機能をそのまま使うことができます。

タブパネルはタブを使って、複数の切り替え可能なパネルを生成します。
基本的にはViewportとそのitemsのような形で、複数のパネルを設定していきます。APIドキュメントでは次のように解説しています。

タブ内のComponentは、単純なPanelクラス、またはそれを継承したクラスです。

要するにパネルであれば何でもタブに入れることができるということです。

Viewportとパネルの作り方さえ分かっていれば、タブパネルは簡単です。まず単純な２つのタブを持つタブパネルを作ります。

Ext.onReady(function(){
//タブを作る itemsの以下のパネルはxtypeで指定すると遅延レンダリングができる。
var tabs = new Ext.TabPanel({
activeTab: 0,
items: [
{
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
},{
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
}
]
});

//タブパネルをビューポートに配置する
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items: tabs
});
});

シンプルなタブパネル

コードを見るとExt.TabPanelのコンフィグはほとんどViewportやExt.Panelのレイアウトの場合と同じです。イメージ的にはタブというレイアウトが自動的に設定されているパネルのような感じです。itemsにはパネルをxtypeで指定しています。activeTabコンフィグはタブパネル起動時にどのパネルを表示するかを指定します。デフォルトではfalseが設定されているので、activeTabを指定しなかった場合はどのタブも選択されず真っ白なパネルが表示されてしまいます。基本的にactiveTabを0にしておけば、起動時に一番左のタブが選択されます。activeTabsはパネルのidを文字列で指定することもできます。

タブパネルではxtypeによる遅延レンダリングが重要です。タブ表示では画面に見えるタブパネルは一つだけで、その他は見えません。遅延レンダリングを利用しない場合はタブパネル起動時にすべてのタブパネルが一気に生成されます。どこかのパネルで処理を手間取ると全体に影響がでてしまいます。タブパネルの子となる要素ではxtypeを使うべきです。

ちなみにxtypeを使わない場合はこうなります。

Ext.onReady(function(){
var tabs = new Ext.TabPanel({
activeTab: 0,
items: [
new Ext.Panel({
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
}),
new Ext.Panel({
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
})
]
});

//タブパネルをビューポートに配置すると
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items: tabs
});
});

またタブパネル自体をxtypeで指定して生成することができます。APIドキュメントのここに書いています。

Ext.TabPanelのxtype

下のサンプルではViewportのitemsにxtypeでタブパネルを指定しています。

Ext.onReady(function(){
var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items:
{
id:'tabs',
xtype:'tabpanel',
activeTab: 'firstTab',
defaults:{
bodyStyle:'padding:50px;text-align:center;'
},
items: [
{
id:'firstTab',
title: 'タブパネル1',
html: '<h1>１つ目のタブパネル</h1>'
},{
id:'secondTab',
title: 'タブパネル2',
html: '<h1>2つ目のタブパネル</h1>'
}
]
}
});
});

タブパネルの主なコンフィグ・オプションの設定
コンフィグの設定はほぼExt.Panelクラスと同じです。以下にタブパネル独自のコンフィグを挙げておきます。

・タブの位置を変更する。
tabPosition:文字列で指定。topまたはbottomのみ設定可能

・タブバーの背景を透明にする
plain : true/false,

・タブのサイズを設定
resizeTabs:　true/false
resizeTabs:　true/false
minTabWidth:　数値で指定
tabWidth:　数値で指定

itemsの中のパネルに設定できるコンフィグ
・タブの閉じるボタン(×ボタン)を追加する
closable: true/false

色々なタブのコンフィグを使ってみたサンプルが以下になります。使いたい設定をコメントを外せば使えます。

Ext.onReady(function(){

var viewport = new Ext.Viewport({
id:'viewport',
layout:'fit',
items:
{
id:'tabs',
xtype:'tabpanel',

//起動時に選択されるタブ 数値(タブの位置)もしくは文字列(id)で指定。
activeTab: 0,

//タブバーの背景を透明に
//plain : true,

//タブのサイズを設定 自動的にタブストリップの幅に合わせる
//resizeTabs:true,

/*
resizeTabs:true,
minTabWidth:50,
tabWidth:300,
*/

//tabMargin:100,

//tabPosition:'bottom',

//タブのスクロール設定　bottomの時は使えない。
enableTabScroll : true,
//タブスクロールのアニメーション
animScroll : true,

defaults:{
bodyStyle:'padding:50px;text-align:center;'
},
items: [
{
id:'firstTab',
title: 'タブパネル1',
//パネルごとのオプション
//閉じるボタンをつける
closable: true,

html: '<h1>１つ目のタブパネル</h1>'
},{
id:'secondTab',
title: 'タブパネル2',
layout:'border',
items:[
{
title:'Center Panel',
region:'center',
html:'ボーダーレイアウトのパネル'
},{
title:'North Panel',
region:'north',
html:'ボーダーレイアウトの上パネル'
},{
title:'South Panel',
region:'south',
html:'ボーダーレイアウトの下パネル'
},{
title:'East Panel',
region:'east',
html:'ボーダーレイアウトの右パネル'
},{
title:'West Panel',
region:'west',
html:'ボーダーレイアウトの左パネル'
}
]
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,

html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,

html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,

html: '<h1>その他タブパネル</h1>'
},{
title: 'タブ・・・・・・・・・・・・・・・パネル',
closable: true,

html: '<h1>その他タブパネル</h1>'
}
]
}
});
});

タブのスクロールを設定時

タブパネルは特殊なレイアウトを持ったパネルと考えるとよいと思います。最初はパネルで作ってたのだけど、後から機能を追加しないといけないのにパネルを置く場所無いという場合も、大きな変更を加えずにタブパネル化ができるので便利です。