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

我有一个gridview，它附带一个有一些字段的模型。但在我的网格中，我只显示一个字段，而我想要的是当我的鼠标悬停在网格行上时，将出现工具提示并显示其他字段的值。将工具提示添加到extjs网格以显示有关该行的完整信息

我怎样才能做到这一点？有人曾经这样做过？

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

请帮帮我。感谢提前:)

2013-08-18 Alfat Saputra Harun

使用渲染器。编写一个将预期值返回给该渲染器函数映射的函数。

样品工作示例：

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 = '数据qtip = “' + deviceDetail + ''”;）你需要显示工具提示数据

来源

2013-08-19 13:36:32 Hariharan

我结束了使用这种方法，更简单：D。谢啦！ –

您可以使用下面的例子从煎茶文档网格列配置

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') + '"'); 
     } 
    } 
});

来源

2013-08-19 10:19:21

感谢您的帮助的人！ –

最简单的方法：

在声明栏使用属性attribute：

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

来源

2014-11-24 21:09:53 Reiksiel

我在渲染中使用：

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

来源

2015-04-03 13:40:40 priya

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

使用您的列渲染器的功能如下：

{ 
       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; 
    }

来源

2016-04-19 04:51:28

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

回答

相关问题