グリッド内クリックの処理を作る
XMLデータの読み込みとグリッドパネルの表示ができたので、次にグリッドの項目（行）がクリックされたときの処理を作成します。
行が選択された時の処理は、new Ext.grid.GridPanel()のsmプロパティに定義します。smプロパティには、new Ext.grid.RowSelectionModel()として、選択時の処理を指定していきます。
今回作成するサイトの場合、同時に複数の行が選択されると困るので、singleSelect : trueと設定し、1行しか選択できないようにします。
項目が選択された場合の処理はlistenersプロパティを使い、さらにその中にあるrowselectのfnプロパティに選択時に呼び出す関数を設定します。ちょっと複雑なので{}の数を間違えないように気を付けてください。
fnに指定した関数には3つの引数が渡されます。3番目の引数がデータオブジェクトになっており、dataオブジェクト内にXMLから読み込んだデータがプロパティ名で定義されています。今回はXMLのタグ名をそのまま使用しているのでdata.latで緯度を、data.lngとすると経度を読み出させます。
実際のスクリプトはサンプル02です。グリッドパネル内の各項目を選択すると、アラートダイアログに事業所ごとの緯度経度が表示されます。緯度経度の変更や事業所名の追加などはXMLデータファイルを変更すればいいので、データとプログラムを完全に分離できます。
選択した事業所の緯度経度がアラートダイアログに表示されます
●サンプル02のソースコード
<!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,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true,
listeners : {
rowselect : {
fn : function(sm, index, record){
Ext.Msg.alert('緯度経度', record.data.lat+","+record.data.lng);
}
}
}
})
});
});
// --></script>
</head>
<body>
<h1>Ext JS 緯度経度表示サンプル</h1>
<p>グリッドをクリックすると緯度、経度の数値が表示されます。</p>
<div id="dataGridArea"></div>
</body>
</html>
