Extjs Grid Mouseover显示工具提示

时间:2014-03-13 13:41:15

标签: extjs

我是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();

但没有任何帮助!!!

由于

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

快速调整代码。函数参数元数据已定义,但" meta"用于下面的行。它应该是:

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

答案 2 :(得分:0)

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