这一节，我们将学习如何获取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: "出版号", 120, renderer: SeeDetail, dataIndex: 'ASIN', sortable: true },
{ header: "作者", 120, dataIndex: 'Author', sortable: true },
{ header: "书名", 180, dataIndex: 'Title', sortable: true },
{ header: "制作商", 115, dataIndex: 'Manufacturer', sortable: false },
{ header: "产品组", 100, dataIndex: 'ProductGroup', sortable: false}],
renderTo: 'example-grid',
viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
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的层中
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: "出版号", 120, renderer: SeeDetail, dataIndex: 'ASIN', sortable: true },
{ header: "作者", 120, dataIndex: 'Author', sortable: true },
{ header: "书名", 180, dataIndex: 'Title', sortable: true },
{ header: "制作商", 115, dataIndex: 'Manufacturer', sortable: false },
{ header: "产品组", 100, dataIndex: 'ProductGroup', sortable: false}],
renderTo: 'example-grid',
viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' },
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的层中
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>
效果图
