您的位置：首页 > Web前端 > JavaScript

ExtJs学习笔记(7)_获取GridPanel选中行的详细信息

2008-08-30 21:25 357 查看

这一节，我们将学习如何获取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>

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>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航