这一节,我们将学习如何获取Grid当前选中行的信息
1.xml数据源内容:
<?
xml version="1.0" encoding="UTF-8"
?>
< Data >
< Items >
< TotalResults > 203 </ TotalResults >
< TotalPages > 21 </ TotalPages >
< Item >
< ASIN > 0446355453 </ ASIN >
< Author > Jimmy.Yang </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Master of the Game </ Title >
</ Item >
< Item >
< ASIN > 0446613657 </ ASIN >
< Author > Sidney Sheldon </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Are You Afraid of the Dark? </ Title >
</ Item >
</ Items >
</ Data >
< Data >
< Items >
< TotalResults > 203 </ TotalResults >
< TotalPages > 21 </ TotalPages >
< Item >
< ASIN > 0446355453 </ ASIN >
< Author > Jimmy.Yang </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Master of the Game </ Title >
</ Item >
< Item >
< ASIN > 0446613657 </ ASIN >
< Author > Sidney Sheldon </ Author >
< Manufacturer > Warner Books </ Manufacturer >
< ProductGroup > Book </ ProductGroup >
< Title > Are You Afraid of the Dark? </ Title >
</ Item >
</ Items >
</ Data >
2.静态页内容:
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all.js" ></ script >
< style type ="text/css" >
* { font-size : 12px ; line-height : 130% ; }
</ style >
< title > ExtJs_Grid_Xml </ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var store = new Ext.data.Store({
url: ' GridData.xml ' ,
reader: new Ext.data.XmlReader(
{ record: ' Item ' },
[ " ASIN " , " Author " , " Manufacturer " , " ProductGroup " , " Title " ])
});
function SeeDetail(ID) {
return ' <a href="Book.aspx?id= ' + ID + ' " target="_blank"> ' + ID + ' </span> ' ;
}
var grid = new Ext.grid.GridPanel({
store: store,
frame: true ,
columns: [
{ id: " ASIN " , header: " 出版号 " , width: 120 , renderer: SeeDetail, dataIndex: ' ASIN ' , sortable: true },
{ header: " 作者 " , width: 120 , dataIndex: ' Author ' , sortable: true },
{ header: " 书名 " , width: 180 , dataIndex: ' Title ' , sortable: true },
{ header: " 制作商 " , width: 115 , dataIndex: ' Manufacturer ' , sortable: false },
{ header: " 产品组 " , width: 100 , dataIndex: ' ProductGroup ' , sortable: false }],
renderTo: ' example-grid ' ,
viewConfig: { columnsText: ' 显示列 ' , sortAscText: ' 升序 ' , sortDescText: ' 降序 ' },
width: 660 ,
height: 100 ,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
// 定义详细信息的显示模板
var bookTplMarkup = [
' 出版号: <a href="http://www.baidu.com/{ASIN}" target="_blank">{ASIN}</a><br/> ' ,
' 作者: {Author}<br/> ' ,
' 书名: {Title}<br/> ' ,
' 产品组: {ProductGroup}<br/> '
];
var bookTpl = new Ext.Template(bookTplMarkup); // ExtJs的模板组件
var p = new Ext.Panel({
id: " detailPanel " ,
title: ' 详细情况 ' , // 标题
collapsible: true , // 右上角上的那个收缩按钮,设为false则不显示
renderTo: ' example-grid ' , // 这个panel显示在html中id为container的层中
width: 660 ,
height: 100 ,
html: " 请在上面网格中选择一行数据 " // panel主体中的内容,可以执行html代码
});
grid.getSelectionModel().on( ' rowselect ' , function (sm, rowIdx, r) {
var detailPanel = Ext.getCmp( ' detailPanel ' );
bookTpl.overwrite(detailPanel.body, r.data);
Ext.MessageBox.alert( " 提示 " , " 您选择的出版号是: " + r.data.ASIN);
});
store.load();
});
</ script >
< div id ="example-grid" style ="margin:10px 0 0 10px" ></ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< link rel ="stylesheet" type ="text/css" href ="../resources/css/ext-all.css" />
< script type ="text/javascript" src ="../adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="../ext-all.js" ></ script >
< style type ="text/css" >
* { font-size : 12px ; line-height : 130% ; }
</ style >
< title > ExtJs_Grid_Xml </ title >
</ head >
< body >
< script type ="text/javascript" >
Ext.onReady( function () {
var store = new Ext.data.Store({
url: ' GridData.xml ' ,
reader: new Ext.data.XmlReader(
{ record: ' Item ' },
[ " ASIN " , " Author " , " Manufacturer " , " ProductGroup " , " Title " ])
});
function SeeDetail(ID) {
return ' <a href="Book.aspx?id= ' + ID + ' " target="_blank"> ' + ID + ' </span> ' ;
}
var grid = new Ext.grid.GridPanel({
store: store,
frame: true ,
columns: [
{ id: " ASIN " , header: " 出版号 " , width: 120 , renderer: SeeDetail, dataIndex: ' ASIN ' , sortable: true },
{ header: " 作者 " , width: 120 , dataIndex: ' Author ' , sortable: true },
{ header: " 书名 " , width: 180 , dataIndex: ' Title ' , sortable: true },
{ header: " 制作商 " , width: 115 , dataIndex: ' Manufacturer ' , sortable: false },
{ header: " 产品组 " , width: 100 , dataIndex: ' ProductGroup ' , sortable: false }],
renderTo: ' example-grid ' ,
viewConfig: { columnsText: ' 显示列 ' , sortAscText: ' 升序 ' , sortDescText: ' 降序 ' },
width: 660 ,
height: 100 ,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true })
});
// 定义详细信息的显示模板
var bookTplMarkup = [
' 出版号: <a href="http://www.baidu.com/{ASIN}" target="_blank">{ASIN}</a><br/> ' ,
' 作者: {Author}<br/> ' ,
' 书名: {Title}<br/> ' ,
' 产品组: {ProductGroup}<br/> '
];
var bookTpl = new Ext.Template(bookTplMarkup); // ExtJs的模板组件
var p = new Ext.Panel({
id: " detailPanel " ,
title: ' 详细情况 ' , // 标题
collapsible: true , // 右上角上的那个收缩按钮,设为false则不显示
renderTo: ' example-grid ' , // 这个panel显示在html中id为container的层中
width: 660 ,
height: 100 ,
html: " 请在上面网格中选择一行数据 " // panel主体中的内容,可以执行html代码
});
grid.getSelectionModel().on( ' rowselect ' , function (sm, rowIdx, r) {
var detailPanel = Ext.getCmp( ' detailPanel ' );
bookTpl.overwrite(detailPanel.body, r.data);
Ext.MessageBox.alert( " 提示 " , " 您选择的出版号是: " + r.data.ASIN);
});
store.load();
});
</ script >
< div id ="example-grid" style ="margin:10px 0 0 10px" ></ div >
</ body >
</ html >
效果图
![](http://images.cntvs.com/jimmy/080830/05.jpg)