3. dojo.dataの使用
dojo.dataを利用するとはつまり、前節で扱ったインターフェースを実装したデータストア・オブジェクトを使うことに他なりません。
dojo.dataはRead, Writeインターフェースを実装した基本データストア実装として、ItemFileReadStoreとItemFileWriteStoreを提供しています。
これらはJSON形式のオブジェクト（またはJSON形式でオブジェクトを定義したファイル）からデータストアのデータを構築します。次のサンプルコードは配列で用意した人事データからItemFileReadStoreを構築し、fetch()メソッドである条件に合うものだけを抜き出す例です。
<html>
<head>
<title>ItemFileReadStoreの生成とfetch()の使用</title>
<style type="text/css">
@import "../dojo-release-1.5.0/dojo/resources/dojo.css";
@import "../dojo-release-1.5.0/dijit/themes/claro/claro.css";
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");
var employee = [
{empno: "00010", name: "青木", workdept: "人事部", phoneno: "3978", hiredate: "2005/11/25"},
{empno: "00020", name: "佐藤", workdept: "総務部", phoneno: "4289", hiredate: "2005/11/30"},
{empno: "00030", name: "田中", workdept: "営業部", phoneno: "8109", hiredate: "2005/11/12"},
{empno: "00040", name: "山本", workdept: "人事部", phoneno: "1380", hiredate: "2005/11/30"},
{empno: "00050", name: "山田", workdept: "商品開発部", phoneno: "7911", hiredate: "2005/11/01"}
];
var store;
dojo.addOnLoad(function(){
store = new dojo.data.ItemFileReadStore(
{
/* ItemFileReadStoreはこの形式のJSONを元にして */
/* データストア・オブジェクトを構築します */
data: {
items: employee,
label: "name"
}
}
);
});
function displayByWorkDept() {
var request = store.fetch({
query: { workdept: "人事部" }, /* アイテムをデータストアから抽出する条件 */
onItem: function(item, request) {
/* 抽出されたアイテムのname属性値を調べてli要素を作る */
dojo.create("li", {innerHTML: store.getValue(item, "name")}, "list1");
}
});
}
</script>
</head>
<body class="claro">
<div id="button1" dojoType="dijit.form.Button" onClick="displayByWorkDept()">人事部所属の人物を抽出</div>
<ul id="list1"></ul>
</body>
</html>
また、次のサンプルはデータストアをデータの保持に用いるdijit.form.ComboBoxを使用する例です。前サンプルコードとはほとんど同じなのでaddOnLoad()から後のコードのみ掲載します。
function setStoreToFormWidget() {
dijit.byId("formWidget1").set("store", store);
}
</script>
</head>
<body class="claro">
<div id="formWidget1" dojoType="dijit.form.ComboBox"></div>
<div id="button1" dojoType="dijit.form.Button"
onClick="setStoreToFormWidget()">ComboBoxにstoreをセット</div>
</body>
</html>
Dojoのウィジェットには他にもデータストアをデータ元として使用するものがあります。
- dijit.form.FilteringSelect, dijit.form.Select, dojox.form.CheckedMultiSelect などのフォームウィジェット
- チャートウィジェット（dojox.charting.* ：第1回記事をご覧ください）
- グリッド（dojox.grid.*）
同タイプのウィジェットならばほとんどコードに手を加えることなく部品を入れ替えることができます（ためしにサンプルコードのformWidget1のdojoTypeをdijit.form.FilteringSelectに変更して実行してみてください。まったく同じように動作します）。これはdojo.dataを用いて統一された操作でデータを利用することのメリットの一つと言えるでしょう。
