ExtJS - 特定列的网格工具提示

Question

我正在尝试在我的网格中为特定列创建一个工具提示。

在我的网格中，我需要第 1 和第 3 列的工具提示。 （姓名和电话号码）

小提琴 - https://fiddle.sencha.com/#view/editor&fiddle/2lop

Answer 1

我认为它很简单。只需将工具提示放在您想要的列项中即可。

columns: [{
            text: 'Name',
            dataIndex: 'name',
            tooltip: 'Name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            tooltip: 'Phone'
        }, {
            text: 'Type',
            dataIndex: 'type'
        }],

如果您想要所有列记录的工具提示，请遵循以下代码：

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

这可在官方 extjs 文档中找到：Tooltip