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

microcosm1994 发布于2019-08-20 16:36 / 3317人阅读

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

如图有多个链接，

{
            text: "探头维度配置",
            dataIndex: "probeId",
            cls: "ux-grid-header",
            align: "center",
            width: 125,
            renderer: function (val) {
                return "详情";
            }
        }, {
            text: "日志",
            cls: "ux-grid-header",
            align: "center",
            width: 240,
            renderer: function (val) {
                return "error.log,warn.log,info.log";
            }

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

        listeners: {
            //这是单击grid单元格时，触发的事件
            "cellclick": function (grid, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                //定义一个函数，等下请求日志是同一个服务器的路径，只是类型不同。
                function fn(data, logsType) {
                    if (1 != status) {
                        Ext.MessageBox.alert("提示", "该引擎未启动");
                        return;
                    }
                    var params = {};
                    params["id"] = data.id;
                    params["logsType"] = logsType;
                    // 发起请求时出现遮罩层
                    var myMask = new Ext.LoadMask(Ext.getBody(), {
                        msg: "请等待..."
                    });
                    myMask.show();
                    Ext.Ajax.request({
                        url: "engine/logs",
                        headers: {
                            "Content-Type": "application/json;charset=utf-8"
                        },
                        params: params,
                        method: "GET",
                        success: function (response, options) {
                            var result = Ext.JSON.decode(response.responseText);
                            if (!result.success) {
                                Ext.MessageBox.alert("出错提示", result.error);
                            } else {
                                // var jsonData=JSON.parse(JSON.stringify(result.data));
                                Ext.create("Ext.Window", {
                                    title: "日志",
                                    height: 400,
                                    width: 700,
                                    layout: "fit",
                                    items: {
                                        xtype: "panel",
                                        autoScroll: true,
                                        // value: result.data,
                                        html: result.data,
                                        readOnly: true
                                    }
                                }).show();
                            }
                            myMask.hide();
                        },
                        failure: function (response, options) {
                            if (!response.success) {
                                Ext.MessageBox.alert("出错提示", response.error);
                            } else {
                                Ext.MessageBox.alert("运行错误", response.responseText);
                            }
                            myMask.hide();
                        }
                    });
                }

                var me = this;
                var data = record.data;
                var status = data.status;
                if (e.target.nodeName == "A") {
                    var type = e.target.type;
                    switch (type) {
                        case "rule":
                            if (1 != status) {
                                Ext.MessageBox.alert("提示", "该引擎未启动");
                                return;
                            }
                            Ext.Ajax.request({
                                url: "engine/engineRules",
                                headers: {
                                    "Content-Type": "application/json;charset=utf-8"
                                },
                                jsonData: data,
                                method: "POST",
                                success: function (response, options) {
                                    var result = Ext.JSON.decode(response.responseText);
                                    if (!result.success) {
                                        Ext.MessageBox.alert("出错提示", result.error);
                                    } else {
                                        // var jsonData=JSON.parse(JSON.stringify(result.data));
                                        Ext.create("Ext.Window", {
                                            title: "引擎订阅规则",
                                            height: 400,
                                            width: 700,
                                            layout: "fit",
                                            items: {
                                                xtype: "textarea",
                                                value: result.data,
                                                readOnly: true
                                            }
                                        }).show();
                                    }
                                },
                                failure: function (response, options) {
                                    if (!response.success) {
                                        Ext.MessageBox.alert("出错提示", response.error);
                                    } else {
                                        Ext.MessageBox.alert("运行错误", response.responseText);
                                    }
                                }
                            });
                            break;
                        case "probes" :
                            var ids = data.probeId;
                            var probesWin = Ext.widget("probesWindow");
                            var probeStore = probesWin.down("grid").getStore();
                            probeStore.getProxy().extraParams = {"ids": ids};
                            probeStore.loadPage(1);
                            probesWin.show();
                            break;
                        case "errorLogs":
                            fn(data, "errorLogs");
                            break;
                        case "infoLogs":
                            fn(data, "infoLogs");
                            break;
                        case "warnLogs":
                            fn(data, "warnLogs");
                            break;
                        default:
                            return;
                    }
                }
            }
        }

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

                    if (1 != status) {
                        Ext.MessageBox.alert("提示", "该引擎未启动");
                        return;
                    }
                    var params = {};
                    params["id"] = data.id;
                    params["logsType"] = logsType;
                    // 发起请求时出现遮罩层
                    var myMask = new Ext.LoadMask(Ext.getBody(), {
                        msg: "请等待..."
                    });
                    myMask.show();
                    Ext.Ajax.request({
                        url: "engine/logs",
                        headers: {
                            "Content-Type": "application/json;charset=utf-8"
                        },
                        params: params,
                        method: "GET",
                        success: function (response, options) {
                            var result = Ext.JSON.decode(response.responseText);
                            if (!result.success) {
                                Ext.MessageBox.alert("出错提示", result.error);
                            } else {
                                // var jsonData=JSON.parse(JSON.stringify(result.data));
                                Ext.create("Ext.Window", {
                                    title: "日志",
                                    height: 400,
                                    width: 700,
                                    layout: "fit",
                                    items: {
                                        xtype: "panel",
                                        autoScroll: true,
                                        // value: result.data,
                                        html: result.data,
                                        readOnly: true
                                    }
                                }).show();
                            }
                            myMask.hide();
                        },
                        failure: function (response, options) {
                            if (!response.success) {
                                Ext.MessageBox.alert("出错提示", response.error);
                            } else {
                                Ext.MessageBox.alert("运行错误", response.responseText);
                            }
                            myMask.hide();
                        }
                    });

GPU云服务器云服务器一个空间怎么建多个网站怎么判断一个域名是否cdn加速一个云服务器怎么加多个应用 html把一个单元格

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

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

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

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

maxmin 2019-08-28 18:03 评论0 收藏0
Python开发【前端篇】HTML

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

番茄西红柿 2019-04-23 13:27 评论0 收藏0
Grid布局简介

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

SoapEye 2019-08-30 10:52 评论0 收藏0
收藏 | 10个可以快速用Python进行数据分析的小技巧

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

silvertheo 2019-07-31 10:37 评论0 收藏0