Ext JS の味見 - 9

ExtJS

「見た目だけぢゃなく、編集まで Excel 風で。:-)」
GridPanel は表示だけだったけれども、編集可能なグリッドも簡単に実装できる。

Web システムにも関わらず、「うちの社員は Excel に慣れてるんで、できれば Excel みたいに操作できるとありがたいんですけど…。」ってな話は、よくある要望だと思う。これまではその実現に四苦八苦していたはずだけど、Ext JS を使えば、そのあたりも簡単に実現できてしまうってゆーのが、今回の "Ext JS の味見" のソースコードだ。

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

        // エディターグリッドパネルの定義
        var panel = new Ext.grid.EditorGridPanel({
            title:      'EditorGrid Test',
            height:     200,
            width:      320,
            selModel:   sm,
            store:      store,
            viewConfig: {forceFit: true},
            columns:    [
              {header: 'なまえ', dataIndex: 'name',  editor: new Ext.form.TextField()},
              {header: '値1',    dataIndex: 'v1',    editor: new Ext.form.NumberField(), align: 'right'},
              {header: '値2',    dataIndex: 'v2',    editor: new Ext.form.NumberField(), align: 'right'}
            ]
        });

        return panel;
    }
    
    Ext.onReady(function() {
        var panel = sample9();
        panel.render('foo9');
    });

    </script>
</head>
<body class="test">
    <h1>Ext JS の味見 - 9</h1>
    <h2>- エディターグリッドパネル -</h2>
    <br />
    <div id="foo9"></div>
</body>

</html>


ソースコードを見れば、GridPanel が EditorGridPanel になってるのと、columns のところに editor と align が増えてるのが分かる。align は、数字なので右寄せにしてみただけで、編集には関係がない。editor が味噌なんだけれども、たったこの程度の労力で、Excel 風の編集ができるんだから、Ext JS ってなかなかすごいと思ってもらえるんぢゃないだろうか?

editor には、Ext.form のコンポーネントが指定できる。datefield を指定すればカレンダー入力が可能になるし、timefield を指定すれば、コンボボックスで時刻指定ができるようになる。独自のコンボボックスを用意すれば、もちろんそれを使うこともできる。

3.0 からは editor の指定に xtype も使えるようになってるんだけど、"Ext JS の味見" では、2.2.1 を使っているの、残念ながら xtype は使えない。で、エディターコンポーネントオブジェクトを生成してるって訳だ。ま、普通にコードを書いてる時点では、どっちでも大差ないと思うけど、深く突っ込んでゆくと、xtype のありがたみが分かるようになってくるんだよなぁ…。ま、味見企画ではそこまでいかないと思うけど…。(^^;

今回は、実際に編集できるところを体感してもらいたいので、スクリーンキャプチャはなし!!