Dojo道場 ～ 第2回「データAPI（dojo.data）を使いこなす」

「Dojo道場」～実用アプリ構築のためのベストプラクティス

5. その他のデータストア

　dojox.dataモジュールには、dojo.data.apiのインターフェースを実装したさまざまなデータストアが提供されています。以下に主なものを列挙します。各データストアの詳細については、dojox.dataのAPIドキュメントを参照してください。

• dojox.data.AtomReadStore
• dojox.data.CsvStore
• dojox.data.FileStore
• dojox.data.FlickrStore
• dojox.data.GoogleSearchStore
• dojox.data.JsonRestStore
• dojox.data.KeyValueStore
• dojox.data.WikipediaStore
• dojox.data.XmlStore

　以下ではCsvStoreとWikipediaStoreおよびGoogleSearchStoreの使い方について簡単に説明します。

5.1. CsvStore

　CsvStoreはCSV形式で保存されたデータからデータストアを作成するクラスです。以下の例では、CsvStoreのアイテムをデータグリッドで表示する方法について説明します。

　まず、CsvStoreを利用してデータストアを作成します。

    dojo.require("dojox.data.CsvStore");
    var csvStore = new dojox.data.CsvStore({url:  "data/test_data.csv"});

　コンストラクタの引数のURLにはCSVファイルのパスを指定します。

　次にcsvStoreの内容をデータグリッドにアイテムの一覧として表示します。データグリッドを使用するためにdojox.grid.DataGridと、それらに必要なDataGridのCSSファイルを読み込みます。

    @import "../dojo-release-1.5.0/dojox/grid/resources/Grid.css";
    @import "../dojo-release-1.5.0/dojox/grid/resources/claroGrid.css";

    dojo.require("dojox.grid.DataGrid");

　次にデータグリッドウィジェットを配置します。先ほど作成したcsvStoreとレイアウトオブジェクトを、それぞれstore、structure属性で指定します。

    <table dojoType="dojox.grid.DataGrid"
        style="width: 800px; height: 300px;"
        store="csvStore">
        <thead>
            <tr>
                <th field="title" width="400px;">記録者</th>
                <th field="date" width="200px;">日付</th>
                <th field="keyword" width="auto">コメント</th>
            </tr>
        </thead>
    </table>

実行結果：