【问题标题】:ExtJS 4.2.1 grid field with tooltip带有工具提示的 ExtJS 4.2.1 网格字段
【发布时间】:2016-02-18 02:23:39
【问题描述】:

我正在尝试为 ExtJS (4.2.1) 网格中的某些文本获得悬停/工具提示效果。 出于某种原因,工具提示 span 几乎被其他所有内容所遮挡。

似乎是堆叠的问题,但我不确定将 span 放在其他所有内容(其他行和网格周围的框架)前面的最佳方式。

小提琴:
https://jsfiddle.net/z3jj601f/

我尝试使用 z-index 无济于事。 谁能告诉我将工具提示跨度带到绝对前台的正确方法?

【问题讨论】:

    标签: javascript css extjs4.2


    【解决方案1】:

    您可以使用 Ext.tip.ToolTip 实现此目的。与 4.2.1 文档中一样,您可以委托工具提示显示/隐藏指定 dom 选择器。

    在你的情况下:

    1. 为你想要工具提示的单元格添加一个自定义类

      columns: [{
        ...
      }, {
        text: 'Status',
        dataIndex: 'status',
        tdCls: 'my-tooltip'
      }
      
    2. 使用委托创建工具提示

      var view = grid.getView();
      var tip = Ext.create('Ext.tip.ToolTip', {
        target: view.el,
        delegate: '.my-tooltip',
        trackMouse: true,
        renderTo: Ext.getBody(),
        listeners: {
          beforeshow: function updateTipBody(tip) {
            var record = view.getRecord(Ext.get(tip.triggerElement).up('tr'));
      
            // Update tooltip text according to current record
            tip.update('Over record ' + record.getId());
          }
        }
      });
      

    这是更新后的小提琴:https://jsfiddle.net/gbb5xh74/

    【讨论】:

    • 这有助于我创建工具提示 - 我非常感谢;但根据我自己的理解,我仍然想知道为什么 CSS 版本不起作用 - 如果有人有更多输入
    • 可能您错过了“溢出:隐藏”。事实上,将“* {overflow: visible !important;}”添加到您的 css 中,工具提示是可见的。您应该在复杂的 extjs DOM 中搜索什么是工具提示容器以设置溢出可见。
    • 你是对的!事实上,如果我在 .x-border-box 上设置该规则,我原来的 Fiddle 就可以工作
    猜你喜欢
    • 1970-01-01
    • 2017-01-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-06-28
    • 2017-01-16
    • 2019-04-20
    相关资源
    最近更新 更多