グリッドパネルを表示する
次に、(2)グリッドパネルの表示処理です。グリッドパネルは、 new Ext.grid.GridPanel() を使って生成できます。あらかじめHTML側に、<div id="dataGridArea"></div> として表示するコンテナを用意しておいてください。
グリッドパネルに表示に必要なオプションを設定していきます。
データストアにより読み込まれたデータは store を使って指定します。グリッドパネルの表示先は renderTo を使い、表示先のコンテナ(div要素)のID名を指定します。
XMLデータのフィールドとカラムの対応は、columns配列で設定します。パネルのヘッダーに表示する項目名を header に書き、カラム幅を width にピクセル単位で指定します。表示するXMLのフィールド名は dataIndexに指定します。たとえば dataIndex: 'name' とすると事業所名が、dataIndex: 'address' なら住所が表示されます。該当するデータが存在しない場合はエラーにはならず空欄になります。
最後にグリッドパネル全体のサイズをwidth と heightにピクセル単位で指定します。
ここまでをまとめたものがサンプル01です。なお、作成したスクリプトはWebサーバーにアップロードしないと正しく動作しません(グリッドパネルの内容が表示されない)。
●サンプル01のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="resources/css/ext-all.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function(){
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();
var grid = new Ext.grid.GridPanel({
store: myStoreData,
renderTo : 'dataGridArea',
columns: [
{ header: '名 称', width: 150, dataIndex: 'name' },
{ header: '住 所', width: 150, dataIndex: 'address' }
],
width:310,
height:120
});
});
// --></script>
</head>
<body>
<h1>Ext JS グリッド表示サンプル</h1>
<p>ページが読み込まれるとグリッドパネルが表示されます。</p>
<div id="dataGridArea"></div>
</body>
</html>