古籏一浩のJavaScriptラボ ― 第7回

入門Ext JS：グリッドパネルの使い方をマスター (2/5)

XMLデータを読み込む

　Ext JSはデータ形式を変更する場合にも柔軟に対応するため、データを格納／処理するデータストアと、データを表示するグリッドパネルに分かれています。グリッドパネルを表示するには、（1）XMLデータを読み込む処理、（2）グリッドパネルの表示処理の2つの段階を踏む必要があります。Ext JSはデータ形式を変更する場合にも柔軟に対応するため、データを格納／処理するデータストアと、データを表示するグリッドパネルに分かれています。

　（1）のXMLデータを処理するデータストア部分から説明します。XMLデータを読み込むには new Ext.data.Store() を使い、読み込みに必要なオプションをプロパティに設定していきます。

　読み込みたいXMLファイルのURLは、urlプロパティに指定します。なお、Ajax（非同期通信）のクロスドメイン制約のため（関連記事）、読み込むXMLデータはHTMLと同一のドメイン上に置く必要があります。

　読み込むデータを処理するreaderプロパティには、XMLデータを定義するための new Ext.data.XmlReader() を指定します。new Ext.data.XmlReader() にはXMLデータ処理のオプションを指定します。

　事業所のデータは <company> 内に書かれているので、recordプロパティには'company'を指定し、事業所の名前や住所などを配列要素として定義していきます。配列要素は { name : 読み込むXMLタグ名 } の形式でXMLタグの数だけ列記します。同一のタグ名が複数ある場合は別途処理が必要ですが、今回のデータの場合はnameで読み込むXMLタグ名をそのまま指定します。

　最後に、new Ext.data.Store() によって生成されたインスタンス（オブジェクト）に対して、load()メソッドを実行するとXMLデータが読み込まれます。

　まとめると以下のようになります。

var myStoreData = new Ext.data.Store({
                    url: 'maplist.xml',
                    reader: new Ext.data.XmlReader({
                        record: 'company'
                    }, [
                            { name:'name' },
                            { name:'address' },
                            { name:'lat' },
                            { name:'lng' }
                        ]
                    )
                });
myStoreData.load();