情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Ext JSでExt.TabPanelを使用する

★過去の記事

第1回

第2回

今回はタブ付きのパネルを表示してみます。

★基本

タブパネルを表示するにはExt.TabPanelを使います。

タブパネルの中に表示するコンテンツはitemsコンフィグで指定します。

itemsには、パネルまたはパネルの配列を入れます。

具体的に書くと次のようになります。

Ext.onReady(function()
{
    var myTabPanel = new Ext.TabPanel(
    {
        id: "myTabPanel",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        items: [
        {
            title: "ひんぬー",
            html: "ルイズ<br/>エルルゥ<br/>芳野さくら<br/>甲田さつき"
        },
        {
            title: "きょぬー",
            html: "知らないよ"
        }]
    });
});

表示してみると下のスクリーンショットのようになります。

中身が空白です。どうしてでしょうか?

これは、デフォルトではタブが選択されていないからです。

アクティブにするタブを指定するには、activeTabにインデックスまたはパネルのIDを指定します。

Ext.onReady(function()
{
    var myTabPanel = new Ext.TabPanel(
    {
        id: "myTabPanel",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        activeTab: 0,
        items: [
        {
            title: "ひんぬー",
            html: "ルイズ<br/>エルルゥ<br/>芳野さくら<br/>甲田さつき"
        },
        {
            title: "きょぬー",
            html: "知らないよ"
        }]
    });
});

または、

Ext.onReady(function()
{
    var myTabPanel = new Ext.TabPanel(
    {
        id: "myTabPanel",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        activeTab: "hinnu",
        items: [
        {
            id: "hinnu",
            title: "ひんぬー",
            html: "ルイズ<br/>エルルゥ<br/>芳野さくら<br/>甲田さつき"
        },
        {
            title: "きょぬー",
            html: "知らないよ"
        }]
    });
});

これで「ひんぬー」タブが表示されるようになりました。

★その他のコンフィグ

その他にも20個近く設定項目があります。

APIリファレンスからの抜粋とその超意訳を載せておきます。英語はそれほど得意ではないので誤訳があるかも知れません(脳内妹に翻訳させたらこんなことにww。分かりにくかったらごめん)。

  • animScroll

True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults to true). Only applies when enableTabScroll = true.

trueだとね、見えないタブを見ようとした時、滑らかに横スクロールして表示してくれるんだよ。デフォルトではtrueなの。それと、enableTabScrolltrueじゃないと意味がないよ。

  • enableTabScroll

True to enable scrolling to tabs that may be invisible due to overflowing the overall TabPanel width. Only available with tabs on top. (defaults to false).

タブが多すぎてパネルの幅に収まりきらない時はね、表示されてないタブをスクロールして見れるようにするよ。デフォルトではfalseなの。それと、タブがパネルの上部に無いと意味がないよ。

  • scrollDuration

The number of milliseconds that each scroll animation should last (defaults to .35). Only applies when animScroll = true.

1回のスクロールに掛かる時間だよ。単位はミリ秒でデフォルトでは35ミリ秒なの。animScrolltrueじゃないと意味がないよ。

  • scrollIncrement

The number of pixels to scroll each time a tab scroll button is pressed (defaults to 100, or if resizeTabs = true, the calculated tab width). Only applies when enableTabScroll = true.

1回のスクロールで動くピクセルだよ。デフォルトでは100ピクセルだけど、resizeTabstrueの場合は計算された分だけ動くの。enableTabScrolltrueじゃないと意味がないよ。

  • scrollRepeatInterval

Number of milliseconds between each scroll while a tab scroll button is continuously pressed (defaults to 400).

スクロールボタンがずーっと押されている時は、この項目に設定された時間毎にスクロールされていくんだよ。単位はミリ秒でデフォルトでは400ミリ秒なの。

  • wheelIncrement

For scrolling tabs, the number of pixels to increment on mouse wheel scrolling (defaults to 20).

マウスホイールを動かした時にどれだけタブをスクロールさせるかだよ。デフォルトでは20ピクセルなの。

  • autoTabSelector

The CSS selector used to search for tabs in existing markup when autoTabs = true (defaults to 'div.x-tab'). This can be any valid selector supported by Ext.DomQuery.select . Note that the query will be executed within the scope of this tab panel only (so that multiple tab panels from markup can be supported on a page).

autoTabstrueの時、タブとして利用される要素を探す時に使われるCSSセレクタだよ。これは、Ext.DomQuery.selectでサポートされている有効なセレクタなら何でもOKだよ。でも、このタブパネルが格納されるコンテナ内でしか検索しないから注意してね。どうしてだって?それは、複数のタブパネルがあるとどのx-tabをどのタブパネルに追加すればいいか訳分かんなくなっちゃうからだよ。そんなことも分からなかったの?頭悪いなあもぉ、お兄ちゃんは(余計なこと書きすぎww)。

  • autoTabs

True to query the DOM for any divs with a class of 'x-tab' to be automatically converted to tabs and added to this panel (defaults to false). Note that the query will be executed within the scope of the container element only (so that multiple tab panels from markup can be supported via this method).

This method is only possible when the markup is structured correctly as a container with nested divs containing the class 'x-tab'. To create TabPanels without these limitations, or to pull tab content from other elements on the page, see the example at the top of the class for generating tabs from markup.

There are a couple of things to note when using this method:

When using the autoTabs config (as opposed to passing individual tab configs in the TabPanel's items collection), you must use applyTo to correctly use the specified id as the tab container. The autoTabs method replaces existing content with the TabPanel components.

Make sure that you set deferredRender to false so that the content elements for each tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed until each tab is activated and will be visible outside the TabPanel.

x-tabというクラス名のdivタグを探し出して、自動的にタブに変換してタブパネルに追加するよ。デフォルトではfalseなの。でも、このタブパネルが格納されるコンテナ内でしか検索しないから注意してね。

コンテナの中にx-tabというクラス名のdivタグがちゃんと入ってないとこれは機能しないよ。もし、こんな制限を取っ払ってタブパネルを作りたかったり、ページの中にある別の要素を使ってタブの内容を作りたかったりするなら、APIリファレンスの一番上を見てね(はぁと)。

この方法を使う時は2つのことに注意してね。

itemsコンフィグにそれぞれのタブの設定を渡すんじゃなくて、autoTabsコンフィグを使いたーいって時は、タブパネルを格納するコンテナを特定するためにapplyToにコンテナのIDを指定してあげてね。そうすると、コンテナの中身をタブパネルに置き換えてくれるよ。

deferredRenderfalseに設定すると、ページが読み込まれた時それぞれのタブの内容はタブパネルの中にすぐに描画されるよ。trueの場合は、それぞれのタブがアクティブにされるまではタブに変換されずに、タブパネルの外にタブにされる前の姿で表示されることになるよ。

  • baseCls

The base CSS class applied to the panel (defaults to 'x-tab-panel').

パネルに適用されるCSSのクラス名だよ。デフォルトではx-tab-panelなの。

  • deferredRender

Internally, the TabPanel uses a Ext.layout.CardLayout to manage its tabs. This property will be passed on to the layout as its Ext.layout.CardLayout.deferredRender config value, determining whether or not each tab is rendered only when first accessed (defaults to true).

それぞれのタブ達に最初にアクセスした時に、初めてレンダリングが行われるかどうかを決めるんだよ。デフォルトではtrueなの。

因みにね、タブパネルは内部でタブ達を管理する為にExt.layout.CardLayoutを使ってるんだってぇ。このコンフィグの値は内部のCardLayoutのdeferredRenderコンフィグにそのまま渡されるんだよ。

  • layoutOnTabChange

Set to true to do a layout of tab items as tabs are changed.

タブが変わった時にタブ内容のレイアウトを行うかどうか決めるんだよ。

  • monitorResize

True to automatically monitor window resize events and rerender the layout on browser resize (defaults to true).

windowresiseイベントを自動的に監視してね、ブラウザのサイズが変わった時に再描画を行うかどうか決めるんだよ。デフォルトではtrueなの。

  • minTabWidth

The minimum width in pixels for each tab when resizeTabs = true (defaults to 30).

resizeTabstrueの時、それぞれのタブの最小の幅を決めるの。デフォルトでは30ピクセルなの。

  • resizeTabs

True to automatically resize each tab so that the tabs will completely fill the tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to be overridden in order to fit them all into view (although minTabWidth will always be honored).

タブストリップの領域を全て使うように、自動的にタブの幅を変えちゃうの。デフォルトではfalseなの。これをtrueにすると、それぞれのタブに設定した幅は無視されちゃう可能性があるよ。だけど、minTabWidthに設定した値よりは小さくならないよ。

  • plain

True to render the tab strip without a background container image (defaults to false).

背景のコンテナの画像を描画しないでタブストリップを表示するよ。デフォルトではfalseなの。

  • tabMargin

The number of pixels of space to calculate into the sizing and scrolling of tabs. If you change the margin in CSS, you will need to update this value so calculations are correct with either resizeTabs or scrolling tabs. (defaults to 2)

サイズ決定やスクロールの際に考慮されるタブの間隔だよ。CSSのマージンの設定を変えたらこの値も変えておいてね。そうしないと、タブ幅の設定とかスクロールとかが上手くできなくなっちゃうから。デフォルトでは2ピクセルだよ。

  • tabPosition

The position where the tab strip should be rendered (defaults to 'top'). The only other supported value is 'bottom'. Note that tab scrolling is only supported for position 'top'.

タブストリップをどこに表示するかだよ。topbottomしかないんだけど、デフォルトではtopなの。タブスクロールはtopの場合しか機能しないから注意してね。

  • tabWidth

The initial width in pixels of each new tab (defaults to 120).

新しいタブの最初の幅だよ。デフォルトでは120ピクセルなの。

使用例。

Ext.onReady(function()
{
    var myTabPanel = new Ext.TabPanel(
    {
        id: "myTabPanel",
        width: 800,
        height: 320,
        renderTo: "floatmenu",
        activeTab: "hinnu",
        items: [
        {
            id: "hinnu",
            title: "ひんぬー",
            html: "ルイズ<br/>エルルゥ<br/>芳野さくら<br/>甲田さつき"
        },
        {
            title: "きょぬー",
            html: "知らないよ"
        },
        {
            title: "ながーーーーーーーーいタブ2",
            html: "2"
        },
        {
            title: "ながーーーーーーーーいタブ3",
            html: "3"
        },
        {
            title: "ながーーーーーーーーいタブ4",
            html: "4"
        },
        {
            title: "ながーーーーーーーーいタブ5",
            html: "5"
        },
        {
            title: "ながーーーーーーーーいタブ6",
            html: "6"
        }],
        resizeTabs: true,
        tabPosition: "bottom"
    });
});

(第3回終)

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-ExtJS