Ext JS の味見 - 8

ExtJS

「前回の 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>

    
    <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 sample8() {
        // グリッドに表示するデータストア。
        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 sm = new Ext.grid.CheckboxSelectionModel({
          singleSelect: true            // 選択は一レコードのみに限定
        });

        // グリッドパネルの定義
        var panel = new Ext.grid.GridPanel({
            title:      'Grid Test 2',
            height:     200,
            width:      320,
            selModel:   sm,                 // 選択方式を指定
            store:      store,
            viewConfig: {
              forceFit: true                // カラム幅を調整
            },
            columns:    [
              new Ext.grid.RowNumberer(),   // 行番号の表示
              {header: 'なまえ',    dataIndex: 'name', sortable: true},
              {header: '値1',      dataIndex: 'v1',    sortable: true},
              {header: '値2',      dataIndex: 'v2'},
              sm                            // 選択チェックボックスの表示
            ]
        });

        return panel;
    }
    
    Ext.onReady(function() {
        var panel = sample8();
        panel.render('foo8');
    });

    </script>
</head>
<body class="test" style="">
    <h1>Ext JS の味見 - 8</h1>
    <h2>- グリッドパネル 2-</h2>
    <br />
    <div id="foo8"></div>
</body>

</html>

GridPanel は、ストア、カラム、ビュー、セレクションの組合せになっている。ストアはデータ、カラムは表示する列、ビューは表示方式、セレクションは選択方式の指定で、標準では次のようなものが用意されている。

  • store (グリッドに表示するデータのストア)
    • SimpleStore
    • JsonStore
    • XmlStore
    • GroupingStore
  • view (グリッドの表示方式)
    • GridView
    • GroupingView
  • selModel (グリッドの選択方式)
    • RowSelectionModel
    • CheckboxSelectionModel
    • CellSelectionModel

もちろん、独自クラスを使うこともできるけれども、標準で用意されているものでもなかなか強力。