资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/extjs grid中一行或者一个单元格中有多个链接的时候怎么判断是哪一个？

extjs grid中一行或者一个单元格中有多个链接的时候怎么判断是哪一个？

microcosm1994 / 3407人阅读

摘要：如图有多个链接，探头维度配置详情日志以上面代码为例，在的时候可以在链接中自定义一个属性，这样就可以通过单元格的点击事件监听，然后通过判断点击的是哪一个链接，代码如下这是单击单元格时，触发的事件定义一个函数，等下请求日志是同一个服务器


如图有多个链接，

</>复制代码 
  1. {
  2.             text: "探头维度配置",
  3.             dataIndex: "probeId",
  4.             cls: "ux-grid-header",
  5.             align: "center",
  6.             width: 125,
  7.             renderer: function (val) {
  8.                 return "详情";
  9.             }
  10.         }, {
  11.             text: "日志",
  12.             cls: "ux-grid-header",
  13.             align: "center",
  14.             width: 240,
  15.             renderer: function (val) {
  16.                 return "error.log,warn.log,info.log";
  17.             }

以上面代码为例，在renderer的时候可以在链接中自定义一个属性“type”，这样就可以通过grid单元格的点击事件监听，然后通过type判断点击的是哪一个链接，代码如下：

</>复制代码 
  1.         listeners: {
  2.             //这是单击grid单元格时，触发的事件
  3.             "cellclick": function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
  4.                 //定义一个函数，等下请求日志是同一个服务器的路径，只是类型不同。
  5.                 function fn(data, logsType) {
  6.                     if (1 != status) {
  7.                         Ext.MessageBox.alert("提示", "该引擎未启动");
  8.                         return;
  9.                     }
  10.                     var params = {};
  11.                     params["id"] = data.id;
  12.                     params["logsType"] = logsType;
  13.                     // 发起请求时出现遮罩层
  14.                     var myMask = new Ext.LoadMask(Ext.getBody(), {
  15.                         msg: "请等待..."
  16.                     });
  17.                     myMask.show();
  18.                     Ext.Ajax.request({
  19.                         url: "engine/logs",
  20.                         headers: {
  21.                             "Content-Type": "application/json;charset=utf-8"
  22.                         },
  23.                         params: params,
  24.                         method: "GET",
  25.                         success: function (response, options) {
  26.                             var result = Ext.JSON.decode(response.responseText);
  27.                             if (!result.success) {
  28.                                 Ext.MessageBox.alert("出错提示", result.error);
  29.                             } else {
  30.                                 // var jsonData=JSON.parse(JSON.stringify(result.data));
  31.                                 Ext.create("Ext.Window", {
  32.                                     title: "日志",
  33.                                     height: 400,
  34.                                     width: 700,
  35.                                     layout: "fit",
  36.                                     items: {
  37.                                         xtype: "panel",
  38.                                         autoScroll: true,
  39.                                         // value: result.data,
  40.                                         html: result.data,
  41.                                         readOnly: true
  42.                                     }
  43.                                 }).show();
  44.                             }
  45.                             myMask.hide();
  46.                         },
  47.                         failure: function (response, options) {
  48.                             if (!response.success) {
  49.                                 Ext.MessageBox.alert("出错提示", response.error);
  50.                             } else {
  51.                                 Ext.MessageBox.alert("运行错误", response.responseText);
  52.                             }
  53.                             myMask.hide();
  54.                         }
  55.                     });
  56.                 }
  57.                 var me = this;
  58.                 var data = record.data;
  59.                 var status = data.status;
  60.                 if (e.target.nodeName == "A") {
  61.                     var type = e.target.type;
  62.                     switch (type) {
  63.                         case "rule":
  64.                             if (1 != status) {
  65.                                 Ext.MessageBox.alert("提示", "该引擎未启动");
  66.                                 return;
  67.                             }
  68.                             Ext.Ajax.request({
  69.                                 url: "engine/engineRules",
  70.                                 headers: {
  71.                                     "Content-Type": "application/json;charset=utf-8"
  72.                                 },
  73.                                 jsonData: data,
  74.                                 method: "POST",
  75.                                 success: function (response, options) {
  76.                                     var result = Ext.JSON.decode(response.responseText);
  77.                                     if (!result.success) {
  78.                                         Ext.MessageBox.alert("出错提示", result.error);
  79.                                     } else {
  80.                                         // var jsonData=JSON.parse(JSON.stringify(result.data));
  81.                                         Ext.create("Ext.Window", {
  82.                                             title: "引擎订阅规则",
  83.                                             height: 400,
  84.                                             width: 700,
  85.                                             layout: "fit",
  86.                                             items: {
  87.                                                 xtype: "textarea",
  88.                                                 value: result.data,
  89.                                                 readOnly: true
  90.                                             }
  91.                                         }).show();
  92.                                     }
  93.                                 },
  94.                                 failure: function (response, options) {
  95.                                     if (!response.success) {
  96.                                         Ext.MessageBox.alert("出错提示", response.error);
  97.                                     } else {
  98.                                         Ext.MessageBox.alert("运行错误", response.responseText);
  99.                                     }
  100.                                 }
  101.                             });
  102.                             break;
  103.                         case "probes" :
  104.                             var ids = data.probeId;
  105.                             var probesWin = Ext.widget("probesWindow");
  106.                             var probeStore = probesWin.down("grid").getStore();
  107.                             probeStore.getProxy().extraParams = {"ids": ids};
  108.                             probeStore.loadPage(1);
  109.                             probesWin.show();
  110.                             break;
  111.                         case "errorLogs":
  112.                             fn(data, "errorLogs");
  113.                             break;
  114.                         case "infoLogs":
  115.                             fn(data, "infoLogs");
  116.                             break;
  117.                         case "warnLogs":
  118.                             fn(data, "warnLogs");
  119.                             break;
  120.                         default:
  121.                             return;
  122.                     }
  123.                 }
  124.             }
  125.         }

这样就根据判断点击的是哪一个超链接了，下面是整个页面的源码：

</>复制代码 
  1.                     if (1 != status) {
  2.                         Ext.MessageBox.alert("提示", "该引擎未启动");
  3.                         return;
  4.                     }
  5.                     var params = {};
  6.                     params["id"] = data.id;
  7.                     params["logsType"] = logsType;
  8.                     // 发起请求时出现遮罩层
  9.                     var myMask = new Ext.LoadMask(Ext.getBody(), {
  10.                         msg: "请等待..."
  11.                     });
  12.                     myMask.show();
  13.                     Ext.Ajax.request({
  14.                         url: "engine/logs",
  15.                         headers: {
  16.                             "Content-Type": "application/json;charset=utf-8"
  17.                         },
  18.                         params: params,
  19.                         method: "GET",
  20.                         success: function (response, options) {
  21.                             var result = Ext.JSON.decode(response.responseText);
  22.                             if (!result.success) {
  23.                                 Ext.MessageBox.alert("出错提示", result.error);
  24.                             } else {
  25.                                 // var jsonData=JSON.parse(JSON.stringify(result.data));
  26.                                 Ext.create("Ext.Window", {
  27.                                     title: "日志",
  28.                                     height: 400,
  29.                                     width: 700,
  30.                                     layout: "fit",
  31.                                     items: {
  32.                                         xtype: "panel",
  33.                                         autoScroll: true,
  34.                                         // value: result.data,
  35.                                         html: result.data,
  36.                                         readOnly: true
  37.                                     }
  38.                                 }).show();
  39.                             }
  40.                             myMask.hide();
  41.                         },
  42.                         failure: function (response, options) {
  43.                             if (!response.success) {
  44.                                 Ext.MessageBox.alert("出错提示", response.error);
  45.                             } else {
  46.                                 Ext.MessageBox.alert("运行错误", response.responseText);
  47.                             }
  48.                             myMask.hide();
  49.                         }
  50.                     });
GPU云服务器 云服务器 一个空间怎么建多个网站 怎么判断一个域名是否cdn加速 一个云服务器怎么加多个应用 html把一个单元格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83036.html

相关文章

  • CSS Grid布局：网格单元格布局

    摘要：基于网格线的占位区网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。也就是说这四条网格线间的区域是一个单元格。 CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout]ht...

    maxmin 评论0 收藏0

  • Python开发【前端篇】HTML

    摘要：标签行内元素，表示一行中的一小段内容，没有具体的语义。表示当前文件所在目录下的上一级目录，比如表示当前目录下的上一级目录下的文件夹中的的图片。标签表示列表的整体。1.html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成...

    番茄西红柿 评论0 收藏0

  • Grid布局简介

    摘要：布局是轴线布局，只能指定项目针对轴线的位置，可以看作是一维布局。可以是一个长度值，一个百分比，或者一个自由空间的一部分使用单位控制自动布局算法的工作方式。 Grid 布局是网站设计的基础，CSS Grid 是创建网格布局最强大和最简单的工具。 轻松使用 Grid 布局提高开发效率，对复杂的网页结构布局更加灵活。 一、概述 Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出...

    SoapEye 评论0 收藏0

  • 收藏 | 10个可以快速用Python进行数据分析的小技巧

    摘要：函数将单元格内容以形式呈现。自动评论代码自动注释单元格中的选定行，再次命中组合将取消注释相同的代码行。如果需要恢复整个已删除的单元格，请按或撤消删除单元格。 showImg(https://segmentfault.com/img/remote/1460000019599210); 编译：小七、蒋宝尚 一些小提示和小技巧可能是非常有用的，特别是在编程领域。有时候使用一点点黑客技术，既可...

    silvertheo 评论0 收藏0

发表评论

登陆后可评论

0条评论

microcosm1994

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<