Extjs 网格鼠标悬停显示工具提示

Question

我是 Extjs 新手，正在为 Extjs 3.2 开发工具提示。我的要求是，当我将鼠标悬停在 extjs 网格行上时，它会显示一个工具提示。在工具提示中我想显示备注字段值。

这是我尝试过的

{header: "remarks",
         width: 120,
         sortable: true,
         dataIndex: 'remarks',
         renderer : function(value, metadata) {
             metadata.tdAttr = 'data-qtip="' + value + '"';
             return value;
             },
         editor: {
            xtype: 'textfield',
            allowBlank: true
        }}

我还包括以下行

Ext.QuickTips.init();

但没有任何帮助！！！

谢谢

Answer 1

我相信当时他们使用 metadata.attr 试试看。

Answer 2

// Try listener, for example
columns:
[
  {
    header: "remarks",
    width: 120,
    sortable: true,
    dataIndex: 'remarks'
  },
  {
    // Column #2
  },
  {
    // Column #3
  }
],

listeners:
{
  itemmouseenter: function(view, record, item, index, e, options)
                  {
                    var remarks = record.get('remarks');
                    var view = this.getView();
                    view.tip = Ext.create
                               (
                                 'Ext.tip.ToolTip',
                                 {
                                   delegate: view.itemSelector,
                                   trackMouse: true,
                                   renderTo: Ext.getBody(),
                                   target: view.el,
                                   listeners:
                                   {
                                     beforeshow: function updateTipBody(tip)
                                                 {
                                                   tip.update("<b>Remarks: </b><div style='color:green;width:200px'>" + remarks + "</div><br>");
                                                 }   
                                   }
                                 }
                               );   
                  }                                             
}

Answer 3

快速了解代码。定义了函数参数元数据，但在下面的行中使用了“元”。应该是：

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