将工具提示添加到 extjs 网格以显示有关该行的完整信息

Posted 2023-02-26

【中文标题】将工具提示添加到 extjs 网格以显示有关该行的完整信息

【英文标题】：add tooltip to extjs grid to show complete information about that row

【发布时间】：2013-08-18 23:52:50

【问题描述】：

我有一个 gridview，它附有一个具有一些字段的模型。但在我的网格中，我只显示一个字段，我想要的是当我的鼠标悬停在网格行上时，tooltip 将出现并显示其他字段的值。

我该怎么做？有人做过吗？

我应该创建什么网格事件工具提示？如何访问我的悬停行值并将其显示在工具提示上？显示价值的好方法，tooltip 可以使用 xpanel 之类的项目，还是唯一的方法是使用 html？

请帮助我。在此先感谢:)

【参考方案1】：

在网格列配置中使用渲染器。编写一个函数，将预期值返回到该渲染器函数映射。

示例工作示例：

columns: [
           text     : 'Device Name'
           ,dataIndex: 'name'
           ,renderer : function(value, metadata,record) 
                                    return getExpandableImage(value, metadata,record);
                    
           ]



function getExpandableImage(value, metaData,record)
    var deviceDetail = record.get('deviceName') + " " + record.get('description');
    metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';
    return value;

这是您需要在工具提示中显示数据的地方 (metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';)

【讨论】：

我最终使用了这种方法，更简单：D。谢谢大佬！

【参考方案2】：

您可以使用 sencha 文档中的以下示例

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip

var store = Ext.create('Ext.data.ArrayStore', 
    fields: ['company', 'price', 'change'],
    data: [
        ['3m Co',                               71.72, 0.02],
        ['Alcoa Inc',                           29.01, 0.42],
        ['Altria Group Inc',                    83.81, 0.28],
        ['American Express Company',            52.55, 0.01],
        ['American International Group, Inc.',  64.13, 0.31],
        ['AT&T Inc.',                           31.61, -0.48]
    ]
);

var grid = Ext.create('Ext.grid.Panel', 
    title: 'Array Grid',
    store: store,
    columns: [
        text: 'Company', flex: 1, dataIndex: 'company',
        text: 'Price', width: 75, dataIndex: 'price',
        text: 'Change', width: 75, dataIndex: 'change'
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
);

var view = grid.getView();
var tip = Ext.create('Ext.tip.ToolTip', 
    // The overall target element.
    target: view.el,
    // Each grid row causes its own separate show and hide.
    delegate: view.itemSelector,
    // Moving within the row should not hide the tip.
    trackMouse: true,
    // Render immediately so that tip.body can be referenced prior to the first show.
    renderTo: Ext.getBody(),
    listeners: 
        // Change content dynamically depending on which element triggered the show.
        beforeshow: function updateTipBody(tip) 
            tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
        
    
);

【参考方案3】：

按如下方式使用列渲染器功能：

                id       :'data',
                header   : 'Data', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'data',
                renderer : function(value, metadata,record) 
                    return setTooltip(value, metadata,record);
                
            


    function setTooltip(value, metaData, record)
        var deviceDetail = record.get('data') + ": " + record.get('description');
        metaData.attr='ext:qtip="' + deviceDetail + '"';
        console.log("deviceDetail: " + deviceDetail);
        return value;
    

【参考方案4】：

最简单的方法：

当你声明列时使用属性attribute:

 
  field: "nameField",
  width: "150px",
  title: "My Field",
  attributes:  title: "#=data.nameField#" 

【参考方案5】：

我在渲染器中使用过：

function(value,metadata,record)
    metadata.attr = 'ext:qtip="' + val + '"';

【讨论】：

对不起，我错过了关闭功能