ExtJSプラグイン紹介 垂直方向のタブパネル
垂直方向のタブパネルを作るプラグイン
https://www.yui-ext.com/forum/showthread.php?t=26257（注.証明書が切れているので警告がでます。)
ExtJS基本機能では水平方向のタブパネルしか、作れませんがプラグインで垂直方向にもタブを設置できます。
使い方
使い方は簡単です。作者のページもしくはフォーラムからプラグインのJSファイルをダウンロードして設置します。
今回はこのポストで修正されているものを使いました。
https://www.yui-ext.com/forum/showthread.php?p=408789#post408789
単純に純正のExt.TabPanelの代わりに、Ext.ux.TabPanelを使うだけです。純正のExt.TabPanleのコンフィグと同じtabPositionのコンフィグにleftもしくはrightを設定するだけです。
ExtJS純正のExt.TabPanelクラスではタブの位置をパネルの上部（top）か下部(bottom)にしか指定できませんでしたが、このプラグインで左右にもタブを配置することができます。
水平タブパネルプラグイン Ext.ux.TabPanel
垂直方向のタブパネルのサンプル
・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=utf-8" />
<title>ExtJSプラグイン 垂直パネルのコンフィグ サンプル</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--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>
<!--垂直タブプラグイン-->
<link rel="stylesheet" type="text/css" href="Ext.ux.TabPanel.css" />
<script type="text/javascript" src="Ext.ux.TabPanel.js"></script>
<script type="text/javascript" src="verticaltab-sample.js"></script>
</head>
<body>
<div id="tabs"></div>
</body>
</html>
ExtJSのライブラリを読み込んだ後で、プラグインのファイルを追加します。今回はCSSファイルもあるのでそのファイルも追加します。
・Java Script
Ext.onReady(function(){
var tabItems = [{
title:'トップ--------',
html:'トップのパネル'
},{
title:'1パネル',
html:'1のパネル'
},{
title:'2パネル',
html:'2のパネル'
},{
title:'3パネル',
html:'3のパネル'
},{
title:'4パネル',
html:'4のパネル'
},{
title:'5パネル',
html:'5のパネル'
},{
title:'6パネル',
html:'6のパネル'
},{
title:'7パネル',
html:'7のパネル'
},{
title:'8パネル',
html:'8のパネル'
},{
title:'9パネル',
html:'9のパネル'
},{
title:'ボトム',
html:'ボトムのパネル'
}];
new Ext.Viewport({
layout:'fit',
items:[
new Ext.ux.TabPanel({
activeTab:0,
tabPosition:'left',
height:200,
textAlign:'right',
defaults:{autoScroll: true},
//enableTabScroll: true,
items:[tabItems]
})
]
});
});
今回使ったバージョンではバグがあるらしく、enableTabScrollを設定した場合タブ幅がおかしくなる場合があります。(renderToを使うとダメのようです。)
Ext.ux.TabPanel.jsの中身は簡単で、単純にExt.TabPanelクラスを継承してタブのスタイルを書き換えるようにしているだけのようです。ちょっと時間があれば直せそうな気もします。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
