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>
 

效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏帘卷西风的专栏

MFC若干小问题解决方案(1)

1、新建一个子类CMFCPropertyGridCtrlEX继承CMFCPropertyGridCtrl

932
来自专栏何俊林

今日力推: Android 高仿哔哩哔哩动画客户端 / Android MD版的花瓣网App

一、CardSwipeLayout 仿探探卡片滑动效果的布局 ? 链接: http://pan.baidu.com/s/1qYApDfQ 密码: fz3q 二、...

3909
来自专栏24K纯开源

用Qt写软件系列五:一个安全防护软件的制作(1)

引言       又有许久没有更新了。Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了。本来计划要写一系列关于Qt组件美化的博文,但是写了几...

2327
来自专栏老司机的简书

CoreText实现图文混排之文字环绕及点击算法

1.老司机最开始没有留demo,以至于这个博客老司机从发出来到现在整整维护了半年了=。=其实博客里面就是全部代码,但是宝宝们任性的要demo。

1742
来自专栏zcqshine's blog

jqGrid在编辑行时获取行数据方式以及自定义 select 的用法

4034
来自专栏数据小魔方

leaflet在线地图进阶宝典之——高级辅助特性

本文跟大家分享leaflet在线地图的高级附加属性,这些属性通常来讲仅仅作为我们数据额可视化项目的修饰元素,而并不会影响数据元素。 但是有了这些辅助修饰元素,往...

3494
来自专栏CDA数据分析师

【图表大师二】 纯Excel图表制作高仿真决策仪表盘

一、什么是仪表盘 仪表盘(guage,speedometer,dial chart,dashboard),是模仿汽车速度表的一种图表,常用来反映预算完成...

2647
来自专栏Java后端技术

一套简约漂亮的响应式博客园主题皮肤分享给你们

  最近在自己博客园逛的时候,总会有一个感觉,真是太丑了,然而又觉得自己暂时抽不出太多的时间来搭建自己的博客系统,上网一搜才发现,原来我们可以自定义博客的布局以...

1483
来自专栏转载gongluck的CSDN博客

GDI透明贴图

网上下载的图片,有一些会有水印。水印的实现可以用透明贴图来做。透明贴图就是让两张图片合并的时候,重叠的部分中使一些颜色不显示,从而达到透明的效果。 如果用GDI...

4336
来自专栏编程之旅

高性能设置圆角,告别离屏渲染

今天来写一个老生常谈的话题,也是一个面试的高频问题,我也在面试时不止一次被问到过这个问题——如何高性能的设置圆角。就用他作为2017年春节上班之后的第一篇文章。

2081

扫码关注云+社区

领取腾讯云代金券