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 >

效果图