ExtJS入門8 Ext.Panelについて2
Ext.Panelについての基本は前回やったので、今回はもう少し発展したパネル作り方を取り上げてみます。
前回の記事はこちら
ExtJS入門7 Ext.TabPanelでタブパネルを作る
http://extjs.blog.sus4.co.jp/2009/11/13/extjs-tutorial7/
autoTabsを使ってパネルを作る。
パネルのコンフィグでオートコンフィグを指定すると、htmlに記述したエレメントをExtJSのタブパネルにできます。
まずhtmlを以下のように用意します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>ExtJS名古屋勉強会 タブパネルサンプル xtabでタブを作る</title>
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />
<!--Loading Ext JS--->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--Loading myApp.js--->
<script type="text/javascript" src="tab_panel_xtab.js"></script>
</head>
<body>
<h1>1.autoTabsを使う</h1>
<div id="my-tabs">
<div class="x-tab" title="Tab 1">これがタブになる1</div>
<div class="x-tab" title="Tab 2">これがタブになる2</div>
</div>
<br />
<h1>2.divを入れ子にした場合</h1>
<div id="my-tabs2">
<div class="x-tab" title="入れ子のDIV">
<div class="x-tab" title="Tab 3">これがタブになる3</div>
<div class="x-tab" title="Tab 4">これがタブになる4</div>
</div>
<div class="x-tab" title="他のタブ">他のタブ</div>
<div>ただのdivはそのまま表示される</div>
</div>
<br />
<h1>3.これはダメ</h1>
<p>autoTabsはレンダリングするDIVの要素のx-tabをタブにするので,x-tabに指定していてもdivの外にいるとダメ</p>
<div id="my-tabs3"></div>
<div class="x-tab" title="Tab NG1">divから出ているとダメ</div>
<div class="x-tab" title="Tab NG2">これも出てるからダメ</div>
</body>
</html>
div要素のクラスに”x-tab”とあります。この要素がタブパネルになります。”x-tab”は”イーエックスティ・タブ”の略だと思います。
ここでは3種類の書き方を試しています。それぞれのタブパネルは指定のidのdivにレンダリングされます。
Javascript側は以下のようになります
Ext.onReady(function(){
var tabs1 = new Ext.TabPanel({
applyTo: 'my-tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
var tabs2 = new Ext.TabPanel({
applyTo: 'my-tabs2',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
var tabs3 = new Ext.TabPanel({
applyTo: 'my-tabs3',
activeTab: 0,
deferredRender: false,
autoTabs: true
});
});
autoTabsを使ったタブパネル
実行結果
contentElを使ってパネルを作る。
autoTabsを使った場合は、htmlの要素にあらかじめ”x-tab”というクラスを指定しなければ行けませんでした。contentElでは、既存の要素を指定してExtJSのタブパネルの要素とします。ターゲットになるエレメントのidは好きなものでかまいません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>ExtJS名古屋勉強会 タブパネルサンプル contentElでタブを作る</title>
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />
<!--Loading Ext JS--->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!--Loading myApp.js--->
<script type="text/javascript" src="tab_panel_nonemarkup.js"></script>
</head>
<body>
<h1>autoTabsを使う</h1>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">タブ1</div>
<div id="tab2" class="x-hide-display">タブ2</div>
</div>
<h1>divを入れ子にした場合</h1>
<div id="my-tabs2">
<div class="x-tab" title="入れ子のDIV">
<div id="tab3" class="x-hide-display">タブ3</div>
<div id="tab4" class="x-hide-display">タブ4</div>
</div>
<div id="tab5">
他のタブ 要素のclassに"x-hide-display"を指定しないと、起動時に丸見えになる。
</div>
</div>
</body>
</html>
Javascript側
Ext.onReady(function(){
var tabs1 = new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
items:[
{contentEl:'tab1', title:'Tab 1'},
{contentEl:'tab2', title:'Tab 2'}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: 'my-tabs2',
activeTab: 0,
items:[
{contentEl:'tab3', title:'Tab 3'},
{contentEl:'tab4', title:'Tab 4'},
{contentEl:'tab5', title:'Other'}
]
});
});
実行結果
contentElを使ったExt.TabPanelの作成
contentElを使って構築している場合は、表示されるべきパネル以外のエレメントは構築された段階では非表示にしなっていないと行けません。サンプルではExtJS付属のCSSを使って非表示にしています。手動でdisplay:noneを設定してもかまいません。x-hide-displayを設定しておくと、タブ選択時の非表示から表示への切り替えはExtJSが行ってくれます。autoTabsではExt.TabPanelクラスの機能で、contentElはExt.Panelの機能を使っています。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] [...]
ExtJS
13 11 月 09 at 7:38 PM
[...] [...]
第3回ExtJS勉強会
27 11 月 09 at 3:51 PM