ExtJS を試してみる

Ajax JavaScript

Ajax デザインパターンで取り上げられていた Data Grid パターンを実装しているものを探していて、Ext JS が良さそうだったので試してみる事に。（他にも Dojo、Rico、YUI、qooxdoo、dhtmlxGrid、ActiveWidgets Grid 等がある）

まずは、Ext JS のサイトから Ext JS 2.0 をダウンロードし、適当なディレクトリに解凍して準備。

Data Grid

最終的に DB の検索結果表示で Data Grid を使う事を考えているが、とりあえずはスタンドアロンでの実行を確認するためのサンプル作成。

デフォルト設定ではブランク用のイメージファイルに http://extjs.com/s.gif を使うようになっているため、ローカルのイメージファイルを使うように Ext.BLANK_IMAGE_URL の値を変更。（推奨の変更方法がわからなかったので暫定処置）

とりあえず、Data Grid のためには以下のような処理を実装する。

  • Ext.data.SimpleStore に表示データやデータの型等を設定
  • Ext.grid.GridPanel にヘッダーやデータグリッドの動作を設定
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
    //デフォルト値の http://extjs.com/s.gif を変更
    Ext.BLANK_IMAGE_URL = "ext-2.0/resources/images/default/s.gif";

    Ext.onReady(function() {
        //表示データの定義
        var data = [
            ['test1', 1000.10, '2007/12/1'],
            ['a', 50.1, '2007/12/27'],
            ['チェックデータ', -10, '2008/1/1']
        ];

        //データの型などを定義
        var store = new Ext.data.SimpleStore({
            fields: [
                {name: 'title'},
                {name: 'point', type: 'float'},
                {name: 'date', type: 'date'}
            ]
        });

        store.loadData(data);

        //データグリッドを定義
        var grid = new Ext.grid.GridPanel({
            columns: [
                {id: 'title', header: 'Title', sortable: true, dataIndex: 'title'},
                {header: 'Point', sortable: true, dataIndex: 'point'},
                {header: 'Date', sortable: true, dataIndex: 'date', 
                   renderer: Ext.util.Format.dateRenderer('Y/m/d')}
            ],
            store: store,
            width: 400,
            height: 200,
            stripeRows: true,
            autoExpandColumn: 'title'
        });

        grid.render('grid-sample');
        grid.getSelectionModel().selectFirstRow();
    });
</script>

</head>
<body>
<h1>ExtJS DataGrid Sample</h1>

<div id="grid-sample"></div>

</body>
</html>

上記のスクリプトで、以下のような機能を持つ Data Grid が表示される。

  • ヘッダー毎のソート
  • 列の横幅変更
  • ドラッグ&ドロップによる列の移動
  • 列毎の表示・非表示
  • 複数行の選択

カレンダー日付入力

ついでに、カレンダー日付入力も試してみた。
Ext.form.DateField でカレンダー日付入力を適用する input 要素の id を設定するだけで、カレンダーで選択した日付がその input に自動的に入力されるようになる。

<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>

<script type="text/javascript">
    //デフォルト値の http://extjs.com/s.gif を変更
    Ext.BLANK_IMAGE_URL = "ext-2.0/resources/images/default/s.gif";

    Ext.onReady(function() {
        var date = new Ext.form.DateField({fieldLabel: '日付', format: 'Y/m/d', 
                                           applyTo: 'dateInput'});
    });
</script>

</head>
<body>
<h1>ExtJS Calendar DateField Sample</h1>

<input type="text" id="dateInput" value="2008/01/01"></input>

</body>
</html>

ここで、fieldLabel の値が表示されるものと思っていたのだが、実際には表示されなかった。
input 要素に直接適用するような方法では出ないのかな？？？