Dojo Toolkit解析メモ ComboBox篇(その1)
Dojo Toolkit解析メモ ComboBox篇(その1)API DOCdijit.form.ComboBoxdojo.require("dijit.form.ComboBox");コンストラクタvar foo = new dijit.form.ComboBox(params: Object?, srcNodeRef: DomNode|String);htmlタグで生成する方法htmlソース//データストアの設定<div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore1" url="http://localhost:8080/webService/share/js/dojo-release-1.1.0/dijit/tests/_data/todoufuken.json"></div><div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore2" url="http://localhost:8080/webService/share/js/dojo-release-1.1.0/dijit/tests/_data/todoufuken2.json"></div><div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore3" url="http://localhost:8080/webService/share/js/dojo-release-1.1.0/dijit/tests/_data/todoufuken3.json"></div><table class="testExample"><tr><th>Widget Type</th><th>Widget Sample</th><th>value</th></tr><tr><td>ComboBox 1</td><td>//1つ目のComboBox(selectタグ、アイテムはoptionタグで定義)<select name="cmb1" dojoType="dijit.form.ComboBox" class="long" pageSize="10"><script type="dojo/connect" event="onChange">console.log(this.getValue());dijit.byId("cmb1t").setValue(this.getValue());</script><option>北海道</option><option>青森県</option><option>岩手県</option><option>宮城県</option><option>秋田県</option><option>山形県</option><option>福島県</option><option>茨城県</option><option>栃木県</option><option>群馬県</option><option>埼玉県</option><option>千葉県</option><option>東京都</option><option>神奈川県</option><option>新潟県</option><option>富山県</option><option>石川県</option><option>福井県</option><option>山梨県</option><option>長野県</option><option>岐阜県</option><option>静岡県</option><option>愛知県</option><option>三重県</option><option>滋賀県</option><option>京都府</option><option>大阪府</option><option>兵庫県</option><option>奈良県</option><option>和歌山県</option><option>鳥取県</option><option>島根県</option><option>岡山県</option><option>広島県</option><option>山口県</option><option>徳島県</option><option>香川県</option><option>愛媛県</option><option>高知県</option><option>福岡県</option><option>佐賀県</option><option>長崎県</option><option>熊本県</option><option>大分県</option><option>鹿児島県</option><option>沖縄県</option></select></td><td><input id="cmb1t" type="text" name="cmb1t" dojoType="dijit.form.TextBox" value="" readOnly="true" class="medium"></td></tr><tr><td>ComboBox 2</td><td>//2つ目のComboBox(inputタグ、アイテムはデータストアで定義)<input id="cmb2" name="cmb2" dojoType="dijit.form.ComboBox" class="medium" store="dataStore1" searchAttr="name" autoComplete="true" value="tokyo" pageSize="10"></td><td><input id="cmb2t" type="text" name="cmb2t" dojoType="dijit.form.TextBox" value="" readOnly="true" class="medium"></td></tr><tr><td>ComboBox 3</td><td>//3つ目のComboBox(inputタグ、アイテムはデータストアで定義)<input id="cmb3" name="cmb3" dojoType="dijit.form.ComboBox" class="medium" store="dataStore3" searchAttr="label" pageSize="10"></td><td><input id="cmb3t" type="text" name="cmb3t" dojoType="dijit.form.TextBox" value="" readOnly="true" class="medium"></td></tr><tr><td>ComboTAB</td><td>//4つ目のComboBox(InlineEditBoxウィジェットとの組み合わせ、アイテムはデータストアで定義)<span name="cmbtab" dojoType="dijit.InlineEditBox" editor="dijit.form.ComboBox" class="medium" editorParams="{value: 'hokkaido', class: 'medium', store: dataStore1, searchAttr: 'label', promptMessage: 'Please enter a state', pageSize:10}"><script type="dojo/connect" event="onChange">console.log('User selected:'+this.getValue());dijit.byId("cmbtabt").setValue(this.getValue());</script>クリックしてください</span></td><td><input id="cmbtabt" type="text" name="cmbtabt" dojoType="dijit.form.TextBox" value="" readOnly="true" class="medium"></td></tr></table>生成されるhtmlソース~~文字数が多いため省略~~生成されるhtmlページ※画像には写っていませんが水色に反転しているところをマウスカーソルが指しています。入力項目欄に入力した値に一致する候補がある場合は↓の図のようにリストに表示される。(※日本語は対応していないようです。)pageSizeプロパティpageSizeプロパティに1ページに表示するアイテム数を設定することができる。総アイテム数がpageSizeプロパティの値より多い場合は、改ページを行う。例)pageSize=10storeプロパティstoreプロパティにComboBoxに表示するアイテムのデータストアを設定することができる。2つ目のComboBoxの設定内容。データストアの定義jsIdプロパティで指定した"dataStore1"という名前でデータストアを参照できるようにする。<div dojoType="dojo.data.ItemFileReadStore" jsId="dataStore1" url="http://localhost:8080/webService/share/js/dojo-release-1.1.0/dijit/tests/_data/todoufuken.json"></div>ComboBoxの定義storeプロパティに"dataStore1"を設定し、上記のデータストアを参照する。<input id="cmb2" name="cmb2" dojoType="dijit.form.ComboBox" class="medium" store="dataStore1" searchAttr="name" autoComplete="true" value="tokyo" pageSize="10">※上記のデータストア(http://localhost:8080/webService/share/js/dojo-release-1.1.0/dijit/tests/_data/todoufuken.json)は下記のjson形式のテキストファイルです。{identifier:"name",label:"label",items: [ {name:"hokkaido", label:"北海道"}, {name:"aomori", label:"青森県"}, {name:"iwate", label:"岩手県"}, {name:"miyagi", label:"宮城県"}, {name:"akita", label:"秋田県"}, {name:"yamagata", label:"山形県"}, {name:"fukushima", label:"福島県"}, {name:"ibaragi", label:"茨城県"}, {name:"tochigi", label:"栃木県"}, {name:"gunma", label:"群馬県"}, {name:"saitama", label:"埼玉県"}, {name:"chiba", label:"千葉県"}, {name:"tokyo", label:"東京都"}, {name:"kanagawa", label:"神奈川県"}, {name:"niigata", label:"新潟県"}, {name:"toyama", label:"富山県"}, {name:"ishikawa", label:"石川県"}, {name:"fukui", label:"福井県"}, {name:"yamanashi", label:"山梨県"}, {name:"nagano", label:"長野県"}, {name:"gifu", label:"岐阜県"}, {name:"shizuoka", label:"静岡県"}, {name:"aichi", label:"愛知県"}, {name:"mie", label:"三重県"}, {name:"shiga", label:"滋賀県"}, {name:"kyoto", label:"京都府"}, {name:"osaka", label:"大阪府"}, {name:"hyogo", label:"兵庫県"}, {name:"nara", label:"奈良県"}, {name:"wakayama", label:"和歌山県"}, {name:"tottori", label:"鳥取県"}, {name:"shimane", label:"島根県"}, {name:"okayama", label:"岡山県"}, {name:"hiroshima", label:"広島県"}, {name:"yamaguchi", label:"山口県"}, {name:"tokushima", label:"徳島県"}, {name:"kagawa", label:"香川県"}, {name:"ehime", label:"愛媛県"}, {name:"kouchi", label:"高知県"}, {name:"fukuoka", label:"福岡県"}, {name:"saga", label:"佐賀県"}, {name:"nagasaki", label:"長崎県"}, {name:"kumamoto", label:"熊本県"}, {name:"oita", label:"大分県"}, {name:"kagoshima", label:"鹿児島県"}, {name:"okinawa", label:"沖縄県"}]}