Ext JS の味見 - 7

ExtJS

「いよいよ、GridPanel へ。」
本題とは関係ないけど、今回から少しだけ見栄えを変えることにしたので、上の方に css が付いている。Ext JS のロジックには影響を与えないので、説明は省略。説明することもないしね。:-)

GridPanel あたりから少し難易度が上がるので、味見企画としては悩ましいところだけれども、避けて通る分けにはゆかない。この強力なパーツがあるからこそ、仕事で使えると言っても過言ではない。GridPanel と同等のことを HTML, CSS, JavaScript だけで実現しようとして、どえらく苦労したことがある。ってゆーか、その時に Ext JS を見つけて、すっかり Ext JS に入れ込むことになったんだけどね。(^^; 2 ヶ月ほどかけてもうまく実現できなかったことが、Ext JS なら 10 分もあれば簡単に実現できてしまうので、ぜひとも、Ext JS のグリッドパネルを知ってもらいたいところ。

GridPanel は関連するクラスも多く、バリエーションも豊富なので、すべてを理解するのは、けっこう大変。今回は、最小限の構成の GridPanel を見てもらうことにする。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
    .test {
        margin:             5mm;
    }
    .test h1 {
        background-color:   darkblue;
        color:              white;
        padding:            10px;
    }
    .test h2 {
        text-align:         right;
    }
    </style>

    <!-- CacheFly を使って、Ext JS を読み込む -->
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>

    <script type="text/javascript">

    function sample7() {
        // グリッドに表示するデータストア。
        var store = new Ext.data.SimpleStore({
            fields:                     // データ項目の定義
                ['name', 'v1', 'v2'],
            data:   [                   // データの配列
                ['山田', '100', '200'],
                ['鈴木', '200', '300'],
                ['木村', '300', '400'],
                ['田中', '400', '500'],
                ['井上', '500', '600'],
                ['森田', '600', '700'],
                ['片山', '700', '800'],
                ['谷口', '800', '900']
            ]
        });

        // グリッドパネルの定義
        var panel = new Ext.grid.GridPanel({
            title:      'Grid Test',
            height:     200,
            width:      320,
            store:      store,          // グリッドに表示する Store を指定
            columns:    [               // グリッドの列項目の指定
                {header: 'なまえ',    dataIndex: 'name'},
                {header: '値1',      dataIndex: 'v1'},
                {header: '値2',      dataIndex: 'v2'}
            ]
        });

        return panel;
    }
    
    Ext.onReady(function() {
        var panel = sample7();
        panel.render('foo7');
    });

    </script>
</head>
<body class="test" style="">
    <h1>Ext JS の味見 - 7</h1>
    <h2>- グリッドテーブル -</h2>
    <br />
    <div id="foo7"></div>
</body>

</html>

たった、これだけのコードで、Excel 風の表でデータを見ることができ、ヘッダーを固定したスクロールもできる。ヘッダーをクリックすれば、メニューが出てきて、列の表示/非表示を切り替えることもできる。

まだまだ、ホンの入り口だが、今回のところは、一先ずは GridPanel が Store を表示するモノであるってゆーところが重要。ただの配列を表示するのに、面倒な手続きがいるように思うかもしれないが、xml や json など、他の形式のデータの場合も同じパターンが使えるところが重要で、GridPanel はデータ形式に依存しないようになってるって訳だ。