イージーネット Tech Blog » ExtJS3.0 http://blog.eni.co.jp/tech 株式会社イージーネットのスタッフによる技術系ブログです Tue, 12 Jan 2010 01:46:58 +0000 http://wordpress.org/?v=2.8.6 ja hourly 1 ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（完） http://blog.eni.co.jp/tech/2010/01/extjs3_grid_table_last.html http://blog.eni.co.jp/tech/2010/01/extjs3_grid_table_last.html#comments Tue, 12 Jan 2010 01:20:58 +0000 笹山 昭秀 http://blog.eni.co.jp/tech/?p=1760 このエントリーは下記の記事の続きです。

ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）
ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２）

遅くなりましたが、明けましておめでとうございます。
笹山です。

前回の記事から更新が滞ってしまいました。（気づいたら2010年！）
記事用の時刻表ExtJSソースは準備していたのですが更新を怠けておりました。
（怠けている間にExt JS 3.1.0がリリースされておりました）
ですので必死で思い出しながら書きます。（本当に完全に忘れている・・・やばい。）

今回はExtJS3.0を用いて時刻表を作成する完結編です。
前回は、

  • ページング機能
  • Gridの高さ変更
  • Grid内のツールチップ表示

について書きましたが、やはり検索機能や飛行機の情報なんかも欲しくなるわけです。
今回は検索機能、飛行機の情報表示を実装してオレオレ時刻表の作成を終わりたいと思います。

検索機能の実装

検索機能の実装も難しくはありません。
実はExt.ux.data.PagingMemoryProxyのdoRequestメソッドにはすでにfiltering機能が備わっています。
前回Ext.ux.data.PagingMemoryProxyを使用したソートで問題があったので、オーバーライドしてoverride-paging-memory-proxy.jsを作成しました。
ですからoverride-paging-memory-proxy.jsを使用して検索機能を実装します。

  • override-paging-memory-proxy.js（フィルタリング部分） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Ext.override(Ext.ux.data.PagingMemoryProxy,{
    doRequest: function(action, rs, params, reader, callback, scope, options){
 
～　省略　～
 
        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }
 
～　省略　～

これを見るとリクエストパラメータに、「filterCol」と「filter」を指定すれば良いことが分かります。
filterColでGridのカラム位置を指定して、「Gird要素内容」と「filter」をmatchメソッドを用いて検索を行っています。

それでは、Gridのカラムと検索文字列を指定して、Grid内のデータから検索ができるようにしてみます。
「カラムを指定するためのComboBox」と「検索文字列を入力するFiled」をGridトップツールバーに作成します。
前回のgrid-timetable.jsを編集して追加していきます。

カラム指定のためのComboBox作成（Ext.form.ComboBox）

まずは「検索カラムを指定するためのComboBox」をgrid-timetable.jsに作成します。

  • 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

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
    //
    // カラムを指定するためのComboBox
    //
    var filterColCombo = new Ext.form.ComboBox({
        id: 'filtercol_combo_id',
        width: 100,
        triggerAction: 'all',
        valueField: 'value',
        displayField : 'view',
        value: 'flightName',
        editable: false,
        mode: 'local',
        store: new Ext.data.ArrayStore({
            fields: ['view','value'],
            data: [
                ['対象空港', 'destination'],
                ['航空会社', 'airline'],
                ['便名', 'flightName'],
                ['機種', 'model'],
                ['伊丹空港時間', 'itamiTime'],
                ['対象空港時間', 'objectTime'],
                ['出発/到着種別', 'type']
            ]
        }),
        listeners: {
            'select': {
                fn: function(combo, record, index) {
                    store.baseParams = {
                        sort: 'itamiTime',
                        dir: 'ASC',
                        filterCol: record.data.value,
                    };
                }
            },
            'afterrender': {
                fn: function(combo) {
                    store.baseParams = {
                        sort: 'itamiTime',
                        dir: 'ASC',
                        filterCol: combo.value,
                    };
                 }
            }
        }
    });
 
～　省略　～

詳細はExtJS3.0のAPIドキュメント（日本語）も出たことですし、そちらを見ていただくとして、今回はポイントだけを書きます。

  • ComboBoxのValue値がGridカラムのdataIndex値と一致するようにComboBoxを作成します。これによりフィルタリング時にGridカラムから値を取り出すことが可能になります。
  • ComboBoxのイベント処理「select」で、ComboBoxが選択された後にリクエストパラメータを設定します。ComboBoxの選択値「record.data.value」をfilterColに設定、同時にソートフィールド、ソート方向も設定しています。
  • ComboBoxのイベント処理「afterrender」で、ComboBoxがレンダリングされた後にリクエストパラメータを設定します。ComboBoxの初期値「combo.value」をfilterColに設定、同時にソートフィールド、ソート方向も設定しています。

検索文字列を入力するFiled作成（Ext.ux.form.SearchField）

次に検索文字列を入力するFiledをgrid-timetable.jsに作成します。
すでにExt.ux.form.SearchFieldという便利なコンポーネントが用意されています。

  • 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

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
    var filterColCombo = new Ext.form.ComboBox({
 
～　省略　～
 
    var store = new Ext.data.Store({
 
～　省略　～
 
    //
　　//　検索文字列を入力するFiled
    //
    var searchField = new Ext.ux.form.SearchField({
        store: store,
        width: 200,
        paramName: 'filter'
    });
 
～　省略　～
  • 検索時のデータソースとして使用するstoreには、Gridで使用するものと同じstoreを指定します。
  • Ext.ux.form.SearchFieldのデフォルトのリクエストパラメータは「query」となっているため、「filter」に変更します。これでリクエストパラメータが「filter」となり、override-paging-memory-proxy.js（フィルタリング部分）で使用できるようになります。

Gridトップツールバーへ追加

先ほど作成した「カラムを指定するためのComboBox」と「検索文字列を入力するFiled」をGridトップツールバーに追加します。

  • grid-timetable.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var grid = new Ext.grid.GridPanel({
 
～　省略　～
 
        //
        // Gridトップツールバー
        //
        tbar: [
            filterColCombo,
            searchField
        ],
 
～　省略　～
  • GridPanelのトップツールバー(tbar)に、先ほど作成したfilterColComboとsearchFieldを指定します。

たったこれだけで検索機能は完成です。

検索カラム指定ComboBoxと検索文字列入力Field

検索カラム指定ComboBoxと検索文字列入力Field


↓

便名指定からの検索結果

便名指定からの検索結果

Grid内に画像付きの飛行機情報を表示する

Gridに表示されている機種は「どんな飛行機なんだろう？」と思ったりしませんか？
それでは、Ext.ux.grid.RowExpanderを使用して画像付きの簡単な機種情報が出るようにしてみようと思います。

画像付きの飛行機情報表示機能作成（Ext.ux.grid.RowExpander）

Ext.ux.grid.RowExpanderを使うと、Gridの各行に[+][-]アイコンを表示して、そのアイコンで行を伸縮し、付加情報を表示／非表示にすることができます。
また表示する情報はExt.Templateを用いて自由にレイアウトすることができます。

  • 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

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var expander = new Ext.ux.grid.RowExpander({
        tpl : new Ext.Template(
            '<table>',
            '    <tr>',
            '        <td>',
            '            <img src="../plainmodel/{airline}/{model}.jpg" alt="{model}">',
            '        </td>',
            '        <td>',
            '            <iframe src="../plainmodel/{airline}/{model}.html" width="500" height="100" frameborder="0"></iframe>',
            '        </td>',
            '    </tr>',
            '</table>'
        )
    });
 
～　省略　～
  • GridのColumns配列内にexpanderを作成するため、Ext.Template を使うことにより {キー名}の箇所がGrid dataIndexから取り出された値で置き換えられます。
  • {キー名}から取り出された値がフォルダ名、ファイル名となるようにしています。
    あらかじめ画像やHTMLが表示されるようにデータを準備して配置しています。
    （例）{airline}キーの値がANA、{model}キーの値がB7の場合
    • img src=”../plainmodel/ANA/B7.jpg”
    • iframe src=”../plainmodel/ANA/B7.html”

GridのColumns配列に追加

先ほど作成したexpanderをGridのColumns配列に追加します。

  • 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

Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
～　省略　～
 
    var grid = new Ext.grid.GridPanel({
        title: '時刻表',
        frame: true,
        height: 350,
        width: 750,
        renderTo: 'grid-timetable',
        stripeRows: true,
        trackMouseOver:true,
        store: store,
            columns: [
　　　　　　　　　//
                // 画像付きの飛行機情報を表示Expander
                //
                expander,　　//← ここ
               {
                  header: '対象空港',
                  sortable: true,
                  dataIndex: 'destination',
                  renderer: function(v, params) {
                      params.attr = getQtipAttr("対象空港", v, 100);
                      return v;
                  }
              },
 
～　省略　～

たったこれだけで、こんなにリッチになります。どうですか？

Grid Expander 画像付きの飛行機情報を表示する

Grid Expander 画像付きの飛行機情報を表示する

今回のソースとデモ

※Grid中の飛行機画像は私が趣味で撮影した画像です。

最後に

時刻表の完成です。
これでエアーバンドを聞きながら検索をかけて、しかも飛行機情報まで表示してくれます。
ずいぶんと私好みの自己中心的な時刻表になってしまいました。

ExtJSで、ごりごり実装することもなく簡単にリッチなテーブルができることがお分かりいただけたと思います。
余裕があるときに改造して「おれおれ時刻表」をパワーアップしていけたらと思っています。

参考リンク

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2010/01/extjs3_grid_table_last.html/feed 0 ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その２） http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part2.html http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part2.html#comments Tue, 08 Sep 2009 03:40:48 +0000 笹山 昭秀 http://blog.eni.co.jp/tech/?p=1429 このエントリーは下記の記事の続きです。

ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１）

こんにちは。笹山です。

前回Ext.grid.GridPanelを用いてシンプルな時刻表を作成しました。

まだまだ物足りないので機能を追加していきます。
せっかくなのでExtJS3.0の新機能を用いてもっとリッチにしていこうと思います。
（前回のGridは実際のところExtJS3.0でなくても作成できます。）

今回は以下の機能追加を行います。

  • ページング機能を追加する
  • Gridの高さを自由に変更可能にする
  • Gridの各Cellにマウスを合わせた時、内容をツールチップに表示する

※今回は全便の時刻表データを使ってサンプルを作成します（8月時刻表全便データ）

新機能ライブラリの追加

ExtJS3.0のサンプルサイトで紹介されている新機能を使用するには、新機能用のライブラリが必要です。
新機能用のライブラリは、ExtJS3.0を展開したexmaple\uxフォルダ以下にあります。（新機能なのに何でexampleフォルダなんだろう？）

必要なファイルは以下になります。

  • ext-3.0.0\examples\ux\ux-all.js
  • ext-3.0.0\examples\ux\css\ux-all.css
  • ext-3.0.0\examples\ux\images以下のファイル全て

前回作成したサンプルをもとに変更を加えていきます。

  • grid-timetable.htmlのHEADタグ内に「新機能に必要なファイル」と「全便の時刻表データファイル」を追加します
    ※override-paging-memory-proxy.jsについては新規作成します

    1
2
3
4

      <link rel="stylesheet" type="text/css" href="path/ux-all.css" />
  <script type="text/javascript" src="path/ux-all.js"></script>
  <script type="text/javascript" src="path/timetable-data.js"></script>
  <script type="text/javascript" src="path/override-paging-memory-proxy.js"></script>

    ※linkタグ、scriptタグ中の「path」 : ファイルを配置したディレクトリ名に変更してください

  • grid-timetable.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!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" />
        <link rel="stylesheet" type="text/css" href="path/ux-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/ux-all.js"></script>
        <script type="text/javascript" src="path/ext-lang-ja.js" charset="UTF-8"></script>
 
        <script type="text/javascript" src="path/timetable-data.js"></script>
	<script type="text/javascript" src="path/override-paging-memory-proxy.js"></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>

Ext.ux.data.PagingMemoryProxyのメソッドオーバーライド

Ext.ux.data.PagingMemoryProxyを利用したサンプルを作成している際に以下のバグを発見しました。

  • Gridのカラムソートの昇順、降順が逆に処理される
  • Gridのカラムソートの降順が正常に動作しない（最後のデータから表示しているだけ）

これを修正するためにExt.ux.data.PagingMemoryProxyのdoRequest メソッドのオーバーライドを行います。
エディタで新しいファイルoverride-paging-memory-proxy.jsを作成します。

  • override-paging-memory-proxy.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

Ext.override(Ext.ux.data.PagingMemoryProxy,{
    doRequest: function(action, rs, params, reader, callback, scope, options){
        params = params ||
        {};
        var result;
        try {
            result = reader.readRecords(this.data);
        }
        catch (e) {
            this.fireEvent('loadexception', this, options, null, e);
            callback.call(scope, null, options, false);
            return;
        }
 
        // filtering
        if (params.filter !== undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el) == 'object') {
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter) ? true : false;
                }
                else {
                    return String(el).match(params.filter) ? true : false;
                }
            });
            result.totalRecords = result.records.length;
        }
 
        // sorting
        if (params.sort !== undefined) {
            // use integer as params.sort to specify column, since arrays are not named
            // params.sort=0; would also match a array without columns
            var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
            var fn = function(r1, r2){
                return r1 == r2 ? 0 : r1 < r2 ? -1 : 1;
　　　　　　　　/* ↑↑↑↑↑↑↑↑↑↑↑↑ ※ux-all.jsでは、 return r1 < r2; になっています */
            };
            result.records.sort(function(a, b){
                var v = 0;
                if (typeof(a) == 'object') {
                    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                }
                else {
                    v = fn(a, b) * dir;
                }
                if (v == 0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }
 
        // paging (use undefined cause start can also be 0 (thus false))
        if (params.start !== undefined && params.limit !== undefined) {
            result.records = result.records.slice(params.start, params.start + params.limit);
        }
        callback.call(scope, result, options, true);
    }
});
Ext
Methods 説明
override 既存クラスのメソッドをオーバーライドします
メソッドが存在しない場合は追加されます

作成したoverride-paging-memory-proxy.jsをgrid-timetable.htmlに追加してください。

ページング機能を追加する

前回はExt.data.ArrayStoreを使用して配列をそのままStoreに渡していましたが、今回はExt.data.Storeのproxyを使用してデータを取得します。
Storeはproxyを使用して外部データを取得します。proxyにはJSON形式でデータを取得するHttpProxyやメモリ内のデータを取得するためのExt.data.MemoryProxyがあります。
今回使用するExt.ux.data.PagingMemoryProxyはExt.data.MemoryProxyが拡張されたものでメモリ内のデータのページングやソートを行うことができます。

それでは、前回のgrid-timetable.jsにページング機能を追加してきます。

  • 「全便の時刻表データファイル」を使用しますので、ソース中に直接書いていたtimeTableData配列を削除します
  • （変更①） StoreをExt.data.ArrayStoreからExt.data.Storeへ変更しproxyからデータを取得するようにします
  • （変更②） Ext.grid.GridPanelのBottomToolbarにExt.PagingToolbarを作成します
  • （変更③） Storeへロードを行う際に、HTTPパラメータを指定してデータをロードします

  • 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

Ext.onReady(function(){
    var store = new Ext.data.Store({                                /* 変更① ここから */
        proxy: new Ext.ux.data.PagingMemoryProxy(timeTableData),
        remoteSort: true,
        baseParams: {sort: 'itamiTime', dir: 'ASC'}, 
        reader: new Ext.data.ArrayReader({
            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: '時刻表',
        frame: true,
        height: 350,
        width: 750,
        renderTo: 'grid-timetable',
        stripeRows: true,
        trackMouseOver:true,
        store: store,
        columns: [
            {
                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 if (v == 'IBEX') {
                        airlineColor = '<span style="color: #F552A8;">' + v + '</span>';
                    } else {
                        var codeShare = v.split('/');
                        if (codeShare.length == 2) {
                            if (codeShare[0] == 'IBEX' && codeShare[1] == 'ANA') {
                                airlineColor = '<span style="color: #F552A8;">' + 
                                    codeShare[0] + '</span>' + '/' + 
                                    '<span style="color: #003399;">' + codeShare[1] + '</span>';
                            } else {
                                // 何もしない
                            }
                        }
                    }
                    return airlineColor;
                }
            },
            {
                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'
            }
        ],
        bbar: new Ext.PagingToolbar({                            /* 変更② ここから */
            pageSize: 30,
            store: store,
            displayInfo: true
        })                                                        /* 変更② ここまで */
    });
 
    store.load({                                                 /* 変更③ ここから */
        params:{
            start:0,
            limit:30,
            sort:'itamiTime',
            dir: 'ASC'
        }
    });                                                          /* 変更③ ここまで */
 
});
  • 変更①　2行目～17行目
    Ext.data.Store
    Config Options 説明
    proxy データオブジェクトへのアクセスを提供するプロキシーオブジェクトを指定します
    remoteSort true：並び替えをproxyに要求して処理します
    false：キャッシュ中のデータ（現在Grid表示されているデータ）で並び替えを行います
    baseParams HTTP リクエスト時に常に送られるパラメータのオブジェクトです
    Ext.ux.data.PagingMemoryProxyではstart,limit,sort,dir,filterのパラメータを受け取り、処理が可能です
    start,limitパラメータはbaseParamsを指定しなくてもページング処理の際、自動で設定されます
    パラメータ 説明
    sort ソートする項目名を指定します
    dir ソートする方向を指定します
    reader DataReader オブジェクトを指定します

    Ext.ux.data.PagingMemoryProxy
    Config Options 説明
    - ページンググリッドが可能なMemoryProxyです（メモリ内のデータから読み込みます）

    Ext.data.ArrayReader
    Config Options 説明
    fields データをどのようにマッピングするか定義します
    パラメータ 説明
    name レコード内でfieldを参照する際に用いるnameです
    ColumnModelのdataIndexプロパティによって参照されます
    type 表示できる値に変換するためのデータタイプです
    指定しない場合は、autoとなり変換を行いません
  • 変更②　89行目～93行目
    Ext.grid.GridPanel
    Config Options 説明
    bbar Gridパネル下部のツールバーです
    Ext.PagingToolbar
    Config Options 説明
    pageSize 1ページ単位で表示するデータの数です
    store ページングツールバーがデータソースとして使用するExt.data.Storeを指定します
    displayInfo displayMsg(ページングステータスメッセージ)を表示します
  • 変更③　96行目～103行目
    Ext.grid.GridPanel
    Methods 説明
    load 設定されたReaderを用いてProxyからレコードキャッシュをロードします
    Options 説明
    params リモートデータソースに対してHTTPパラメータとして渡すプロパティを指定します
    Ext.ux.data.PagingMemoryProxyでは以下のパラメータを受け取り、処理が可能です
    start:データ開始位置
    limit:1ページ当たりのデータ件数
    sort:ソートする項目名
    dir:ソートする方向

Grid(時刻表)ページング機能

Grid(時刻表)ページング機能

たったこれだけの変更でページング機能が実現できます。今回はメモリ内のデータでページング機能を行いました。proxyをExt.data.HttpProxyに変更すれば、サーバからXML、JSON形式でデータを取得してこれを実現することが可能です。

ページング機能を拡張する

ExtJS3.0の新しい機能でページングの機能を簡単に便利に、カッコ良くできます。

  • （拡張①）スライドでページング可能にする
  • （拡張②）プログレスバーで進捗確認、ページング可能にする
  • grid-timetable.js
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        bbar: new Ext.PagingToolbar({
            pageSize: 30,
            store: store,
            displayInfo: true,
            plugins: [
                new Ext.ux.SlidingPager(),          /* 拡張① */
                new Ext.ux.ProgressBarPager()       /* 拡張② */
            ]
        })
 
               // ～省略
Grid(時刻表)ページング機能拡張（SlidingPager,ProgressBarPager）

Grid(時刻表)ページング機能拡張（SlidingPager,ProgressBarPager）

たったこれだけです。
Ext.PagingToolbarのpluginsオプションに指定するだけで簡単に実現できます。

Gridの高さを任意のサイズに変更可能にする

ここまでのGrid(時刻表)高さは固定でした。
データがサイズ内に収まらない場合は、スクロールして見る必要がありました。
そこでGrid(時刻表)の高さを任意のサイズに変更できるようにします。

  • （拡張③）Grid(時刻表)の高さを任意のサイズに変更可能にする
  • grid-timetable.js
19
20
21
22
23
24
25
26
27
28

    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        plugins: new Ext.ux.PanelResizer({  /* 拡張③ ここから */
            minHeight: 100,
            maxHeight: 800
        }),                                /* 拡張③ ここまで */
 
               // ～省略
Ext.ux.PanelResizer
Config Options 説明
minHeight 変更可能最小サイズ(pixel)
maxHeight 変更可能最大サイズ(pixel)

Grid(時刻表)高さ変更

Grid(時刻表)高さ変更

Ext.grid.GridPanelのpluginsオプションに指定するだけでこれも簡単に実現できます。

GridのCell内容をツールチップに表示する

今回のGrid(時刻表)では問題ないですが、文字列が長すぎてCell内に収まりきらない場合があります。
そのようなときのために、GridのCell上でマウスオーバしたときにツールチップを表示させてみます。

  • （拡張④）GridのCell内容をツールチップに表示する
  • 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

Ext.onReady(function(){
 
    Ext.QuickTips.init();                                        /* 拡張④ */
 
               // ～省略
 
    var grid = new Ext.grid.GridPanel({
 
               // ～省略
 
        columns: [
            {
                header: '対象空港',
                sortable: true,
                dataIndex: 'destination',
                renderer: function(v, params) {                 /* 拡張④ ここから */
                    params.attr = 
                         'ext:qtitle="対象空港"' + ' ext:qwidth="100"' + ' ext:qtip="' + v + '"';
                    return v;
                }                                               /* 拡張④ ここから */
            },
 
               // ～省略
  • 拡張④ 3行目
    Ext.QuickTips
    Methods 説明
    init 全体のQuickTipsのインタフェースを初期化し、QuckTipsを使用可能にします。
  • 拡張④ 16行目～20行目
    Ext.grid.GridPanel
    Config Options 説明
    renderer セルの与えられたデータ値にHTMLマークアップを生成するために使用される関数です

    rendererに使用する無名関数function(v, params)で以下のHTML属性を追加することでツールチップ表示が可能になります。

    属性 説明
    ext:qtitle ツールチップのタイトルです
    ext:qwidth ツールチップの幅(pixel)です
    ext:qtip ツールチップで表示する内容です

    ※一般的なHTMLタグに直接上記属性を指定することもできます。

Grid(時刻表)ツールチップ表示

Grid(時刻表)ツールチップ表示

これも簡単に実現できてしまいました。
一般的なHTMLタグにも属性指定して簡単にツールチップを表示できるなんて素敵です。

最後に

だいぶん時刻表がカッコ良くなってきました。
ほとんどコードを書くことなく機能が実現できて感動しました。
次回ももう少し時刻表に機能を追加していこうと思っています。
お楽しみに！

ExtJS3.0 Gridデモ　「伊丹空港　8月時刻表（全便）　その２」　

参考リンク

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part2.html/feed 1 ExtJS3.0でWebアプリケーションのテーブルをリッチにしよう（その１） http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part1.html http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part1.html#comments Wed, 02 Sep 2009 01:14:34 +0000 笹山 昭秀 http://blog.eni.co.jp/tech/?p=1190 こんにちは。笹山です。

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のインストール

  1. ExtJS3.0をダウンロードして適当な場所に展開します
  2. 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のリソースを日本語化）
  3. 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に以下を追加します

  1. HEADタグ内にSCRIPTタグを追加して今回ExtJSで作成する外部ファイル（以降 grid-timetable.jsとします）を指定します
  2. 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);
});
Class Ext
Methods 説明
onReady DOMが完全に読みこまれた後に自動的に呼び出され、参照したいページの要素が利用できるようになります

　

Class Ext.data.ArrayStore（データを保持するためのデータストアを作成します ）
Config Options 説明
fields データをどのようにマッピングするか定義します
パラメータ 説明
name レコード内でfieldを参照する際に用いるnameです
ColumnModelのdataIndexプロパティによって参照されます
type 表示できる値に変換するためのデータタイプです
指定しない場合は、autoとなり変換を行いません
Methods 説明
loadData データをストアへロードします

　

Class Ext.grid.GridPanel（Gridパネルを作成します ）
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のカラムソート


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でシンプルな時刻表を作りました。
難しいことをコーディングしなくても簡単に実現できることがお分かりいただけたと思います。
次回もまだまだ機能追加していきます。お楽しみに！

参考リンク

あわせて読みたい

]]> http://blog.eni.co.jp/tech/2009/09/extjs3_grid_table_part1.html/feed 3