こんにちは。笹山です。
WebアプリケーションでDBなどからデータを取得して一覧表示させる方法は、HTMLのTABLEタグで書かれたものが多いと思います。
もちろんスタイルシートを駆使すればカッコよくはなるのでしょうが、今回はこれをもう少し手軽にリッチにしようとExtJSを使ってみました。
余談ですが今回のExtJSサンプルは、私自身の趣味のために作成しました。
趣味でよく伊丹空港に飛行機を撮影に行きます。エアーバンドで便名を聞いて、その飛行機が
「どこ行き？どこから来た？機種は何？」
というのが知りたいことがよくあります。（私だけか？）
これから数回に渡り、ExtJSで伊丹空港の8月の時刻表を私好みにしていこうと思います。
ExtJSとは
インターネットで検索すればすぐに分かると思いますので簡単に紹介します。
まず、ExtJSとは、リッチなWEBアプリケーション開発のためのJavaScriptライブラリです。
コンポーネントも揃っており、拡張も簡単にできます。
また、ドキュメントやサンプルも揃っていますので、比較的簡単にリッチなUIが実現できます。
一般的なテーブル
時刻表をHTMLのTABLEタグで作成するとこんな感じでしょうか。
| 対象空港 | 航空会社 | 便名 | 機種 | 伊丹空港時間 | 対象空港時間 | 出発/到着種別 |
|---|---|---|---|---|---|---|
| 札幌（千歳） | JAL | 3911 | B6 | 8:00 | 9:50 | Departure |
| 札幌（千歳） | JAL | 2001 | B7 | 8:35 | 10:25 | Departure |
| 札幌（千歳） | ANA | 771 | B6 | 8:55 | 10:45 | Departure |
| 札幌（千歳） | ANA | 775 | A32 | 11:45 | 13:35 | Departure |
| 札幌（千歳） | ANA | 777 | B6 | 14:15 | 16:05 | Departure |
| 札幌（千歳） | JAL | 2019 | CRJ | 18:30 | 20:20 | Departure |
| 札幌（千歳） | JAL | 2000 | CRJ | 10:25 | 8:30 | Arrival |
| 札幌（千歳） | JAL | 3912 | CRJ | 13:00 | 11:05 | Arrival |
| 札幌（千歳） | ANA | 774 | B6 | 14:15 | 12:25 | Arrival |
| 札幌（千歳） | ANA | 776 | A32 | 16:00 | 14:10 | Arrival |
| 札幌（千歳） | JAL | 2016 | B7 | 19:25 | 17:30 | Arrival |
| 札幌（千歳） | ANA | 778 | B6 | 19:30 | 17:40 | Arrival |
一覧の表示だけで何もできません。
例えば、時間の降順に一覧を表示したい場合、プログラムでデータをSortし、その結果で一覧を作成し直す必要があります。
一覧のカラム順番を変えたい場合（例えば、出発/到着種別カラムを一番前のカラムにしたい）、一覧表示後はカラム順番を変えることはできません。
ExtJSを使うと簡単に実現できてしまいます。
ExtJSのインストール
- ExtJS3.0をダウンロードして適当な場所に展開します
- ExtJSに必要なファイルは以下になります
- ext-3.0.0/resources/css/ext-all.css （ExtJSのスタイルシート）
- ext-3.0.0/adapter/ext/ext-base.js （ExtJSのcore utilitiesとfunctions）
- ext-3.0.0/ext-all.js （ExtJSの全ての機能）
- ext-3.0.0/src/locale/ext-lang-ja.js （ExtJSのリソースを日本語化）
- ExtJSを使用するHTML（以降grid-timetable.htmlとします）のHEADタグ内に必要なファイルを指定します
1 2 3
<script type="text/javascript" src="path/ext-base.js"></script> <script type="text/javascript" src="path/ext-all.js"></script> <script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>
※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください
これでExtJSが使用できるようになります。
Ext.grid.GridPanelで時刻表を作成
先ほどのgrid-timetable.htmlに以下を追加します
- HEADタグ内にSCRIPTタグを追加して今回ExtJSで作成する外部ファイル（以降 grid-timetable.jsとします）を指定します
- BODYタグ内に、DIVタグを追加してidにgrid-timetableを指定し、時刻表を配置する場所を指定します
- grid-timetable.html（※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="path/ext-all.css" />
<script type="text/javascript" src="path/ext-base.js"></script>
<script type="text/javascript" src="path/ext-all.js"></script>
<script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>
<script type="text/javascript" src="path/grid-timetable.js"></script>
<title>伊丹空港 8月時刻表</title>
</head>
<body>
<h1>伊丹空港 8月時刻表</h1>
<div id="grid-timetable"></div>
</body>
</html> |
| 行番号 | 説明 |
|---|---|
| 11行目 | ExtJSで作成する外部ファイルを指定します |
| 16行目 | 時刻表を配置する場所を指定します |
- grid-timetable.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | Ext.onReady(function(){ var timeTableData = [ ['札幌（千歳）','JAL','3911','B6','2009/08/01 8:00:00','2009/08/01 9:50:00','Departure'], ['札幌（千歳）','JAL','2001','B7','2009/08/01 8:35:00','2009/08/01 10:25:00','Departure'], ['札幌（千歳）','ANA','771','B6','2009/08/01 8:55:00','2009/08/01 10:45:00','Departure'], ['札幌（千歳）','ANA','775','A32','2009/08/01 11:45:00','2009/08/01 13:35:00','Departure'], ['札幌（千歳）','ANA','777','B6','2009/08/01 14:15:00','2009/08/01 16:05:00','Departure'], ['札幌（千歳）','JAL','2019','CRJ','2009/08/01 18:30:00','2009/08/01 20:20:00','Departure'], ['札幌（千歳）','JAL','2000','CRJ','2009/08/01 10:25:00','2009/08/01 8:30:00','Arrival'], ['札幌（千歳）','JAL','3912','B6','2009/08/01 13:00:00','2009/08/01 11:05:00','Arrival'], ['札幌（千歳）','ANA','774','B6','2009/08/01 14:15:00','2009/08/01 12:25:00','Arrival'], ['札幌（千歳）','ANA','776','A32','2009/08/01 16:00:00','2009/08/01 14:10:00','Arrival'], ['札幌（千歳）','JAL','2016','B7','2009/08/01 19:25:00','2009/08/01 17:30:00','Arrival'], ['札幌（千歳）','ANA','778','B6','2009/08/01 19:30:00','2009/08/01 17:40:00','Arrival'] ]; var store = new Ext.data.ArrayStore({ fields: [ {name: 'destination'}, {name: 'airline'}, {name: 'flightName'}, {name: 'model'}, {name: 'itamiTime', type: 'date'}, {name: 'objectTime', type: 'date'}, {name: 'type'} ] }); var grid = new Ext.grid.GridPanel({ title: '時刻表', height: 320, width: 750, stripeRows: true, renderTo: 'grid-timetable', store: store, columns: [ { header: '対象空港', sortable: true, dataIndex: 'destination' }, { header: '航空会社', sortable: true, dataIndex: 'airline' }, { header: '便名', sortable: true, dataIndex: 'flightName' }, { header: '機種', sortable: true, dataIndex: 'model' }, { header: '伊丹空港時間', sortable: true, dataIndex: 'itamiTime', renderer: Ext.util.Format.dateRenderer('H:i') }, { header: '対象空港時間', sortable: true, dataIndex: 'objectTime', renderer: Ext.util.Format.dateRenderer('H:i') }, { header: '出発/到着種別', sortable: true, dataIndex: 'type' } ] }); store.loadData(timeTableData); }); |
| Methods | 説明 |
|---|---|
| onReady | DOMが完全に読みこまれた後に自動的に呼び出され、参照したいページの要素が利用できるようになります |
| Config Options | 説明 | |
|---|---|---|
| fields | データをどのようにマッピングするか定義します | |
| パラメータ | 説明 | |
| name |
レコード内でfieldを参照する際に用いるnameです ColumnModelのdataIndexプロパティによって参照されます |
|
| type |
表示できる値に変換するためのデータタイプです 指定しない場合は、autoとなり変換を行いません |
|
| Methods | 説明 | |
| loadData | データをストアへロードします | |
| Config Options | 説明 | |
|---|---|---|
| title | Gridパネルのタイトルです | |
| height | Gridパネルの高さ(pixel)です | |
| width | Gridパネルの幅(pixel)です | |
| stripeRows | 行をストライプ表示します | |
| renderTo | 存在するエレメントIDを指定して、コンテナエレメントへ描画します | |
| store | Gridがデータストアとして扱うストアを指定します | |
| columns | Gridが使うColumnModelを定義します | |
| パラメータ | 説明 | |
| header | ヘッダーテキストです | |
| sortable | カラムソートを許可します | |
| dataIndex | Gridのデータストアで定義したnameを指定します | |
| renderer | セルの与えられたデータ値にHTMLマークアップを生成するために使用される関数です | |
これをブラウザで表示すると、ソート、カラム移動、カラム幅の変更が可能な時刻表が表示されるはずです。
今回はあらかじめ用意しておいた配列でExt.data.ArrayStoreを用いてGridを作成しました。DBからデータを取得してGridを作成するにはJSON形式でレスポンスを返し、Ext.data.JsonStoreを使用してGridを作成します。
ExtJS Gridのカラムソート
ExtJS Gridのカラム移動
もう少しリッチに
「シンプルGrid」で今回のブログを終わろうと思いましたが、もう少しお付き合いください。
あと３点追加したいと思います。
- （追加機能①） 伊丹空港の時刻表なので伊丹空港時間で最初から昇順表示しておく
- （追加機能②） Gridへ自動的に行番号を振る
- （追加機能③） 航空会社ごとに色づけして表示
先ほどのgrid-timetable.jsに以下を追加してください。
- 追加機能① 28行目～31行目
Ext.data.ArrayStore Config Options 説明 sortInfo ソート順序を指定します パラメータ 説明 field ソートを行う対象fieldを指定します direction ソート方向を指定します - 追加機能② 42行目
Ext.grid.RowNumberer Config Options 説明 － 自動的にGridに行番号を表示します - 追加機能③ 52行目～62行目
Ext.grid.GridPanel Config Options 説明 renderer セルの与えられたデータ値にHTMLマークアップを生成するために使用される関数です
文字列を比較して文字色を変えています
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
～ 省略 ～
var store = new Ext.data.ArrayStore({
fields: [
{name: 'destination'},
{name: 'airline'},
{name: 'flightName'},
{name: 'model'},
{name: 'itamiTime', type: 'date'},
{name: 'objectTime', type: 'date'},
{name: 'type'}
],
sortInfo: { /* 追加機能 ① ここから */
field: 'itamiTime',
direction: 'ASC'
} /* 追加機能 ① ここまで */
});
var grid = new Ext.grid.GridPanel({
title: '時刻表',
height: 320,
width: 750,
stripeRows: true,
renderTo: 'grid-timetable',
store: store,
columns: [
new Ext.grid.RowNumberer(), /* 追加機能 ② */
{
header: '対象空港',
sortable: true,
dataIndex: 'destination'
},
{
header: '航空会社',
sortable: true,
dataIndex: 'airline'
renderer: function(v, params){ /* 追加機能 ③ ここから */
var airlineColor = v;
if (v == 'ANA') {
airlineColor = '<span style="color: #003399;">' + v + '</span>';
} else if (v == 'JAL') {
airlineColor = '<span style="color: #cc0000;">' + v + '</span>';
} else {
// 何もしない
}
return airlineColor;
} /* 追加機能 ③ ここまで */
},
～ 省略 ～ |
時刻表 機能追加
ExtJS3.0 Gridデモ 「伊丹空港 8月時刻表（全便）」
最後に
今回はExtJSのGridでシンプルな時刻表を作りました。
難しいことをコーディングしなくても簡単に実現できることがお分かりいただけたと思います。
次回もまだまだ機能追加していきます。お楽しみに！
9月 2nd, 2009 at 19:13
[...] ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１） [...]
9月 8th, 2009 at 12:41
[...] ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１） [...]
1月 12th, 2010 at 10:42
[...] ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１） ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２） [...]