Dojo Toolkit 1.2のComboBox

dojo

　昨日に引き続いて、Dojo Toolkitの1.2への移行です。
　今日はComboBoxを使ってみました。Dojoの0.9からwidgetはdijitとなり、機能はdijitで、見た目はCSSで設定するようになりました。したがって0.4の頃は、

dojo.require("dojo.widget.ComboBox");

とだけ呼び出していたものが、0.9からは

<style type="text/css">
@import "../dojo/dijit/themes/tundra/tundra.css";
@import "../dojo/dojo/resources/dojo.css";
</style>
<body class="tundra">

とスタイルシートの読み込みと、bodyにクラスを指定します。そしてparser機能を有効にするため、dojo.jsを読み込む前に

var djConfig = {parseOnLoad: true}

とするか、

<script type="text/javascript" src="/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

のように読み込みと同時にdjConfigにparseOnLoad: trueを指定します。で、モジュールの読み込み

dojo.require("dojo.parser");
dojo.require("dijit.form.ComboBox");

という風にdojo.parserの機能も必要になって、ようやくdijit.form.ComboBoxが使えるようになります。
　ComboBoxの使い方はマニュアルを参考にできます。
　あと、マニュアルにもありますが、リストされるデータをJSON形式の別ファイルにしてて、リスト内容を読み込む方法ですが、dojo.data.ItemFileReadStoreを使います。ここの記述によると、他にXMLやらCSVのデータを読む関数もあるみたいですね。

dojo.require("dojo.data.ItemFileReadStore");

とロード。データファイルは

var dataStore = new dojo.data.ItemFileReadStore({url: "./data.php?k=s"});

とスクリプト内でオブジェクトを読み込むか、

<div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore" url="./data.php?k=s"></div>

という具合に、html内でjsIdとしてデータを読み込めます。こうやって読み込んだデータは、storeオプションの

<input dojoType="dijit.form.ComboBox" id="sel" store="dataStore" />

で使えます。値の取得は

var v = dojo.byId('sel').value

でできました。
　ただ、与えるJSONデータ形式なんですが、ラベルと値をどうやって渡せばいいのか、いまいちよくわかっていません。とりあえずラベルと値が同じとして

{identifier: 'name',
	items: [
		{name: 'a'},
		{name: 'b'}
	]
}

というのでうまくいったので、今回は追及しませんでしたが、マニュアルページにあるように、ラベルと値を異なるようなJSON形式でどうやって値を取得するのか、調べてみる必要がありそうです。
　見た目のテーマですが、tundraの他にnihiloやsoriaというのもあって、好きなほうを使うか、自分で作ってみるもありかと思います。しかしDojo 0.9からはこうやってwidgetを使うのに、結構、手を入れる場所が多い、ブラウザーやそのバージョン違いによる見た目の差異などを吸収するためかと思いますが、将来のバージョンアップで追随するのに修正部分が増えそうで面倒ですね。

12/4追記

　この日に、与えるJSONデータ形式について調べたのを記述しています。
　それと上の例のJSONですが、wikipedia:JSONを見ると文字列はキーも値もダブルクォーテーションで挟むのが正しく、ここで書いているのは完全に良くないです。悪い例として残しておきます。