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

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

效果图
posted @ 2008-08-30 21:25  菩提树下的杨过  阅读(15200)  评论(0)  编辑  收藏  举报