ExtJS -网格单元格工具提示

brqmpdu1 于 9个月前发布在其他

关注(0)|答案(1)|浏览(76)

我正在尝试创建一个单元格的工具提示。下面的代码可以做到这一点，但工具提示只出现在点击（在mozilla）和IE工具提示出现在mouseOver，但显示最后点击单元格的值。
我想要一个在mouseOver网格上的工具提示，以单元格内容作为工具提示显示值。
请提出任何其他实现这一目标的方法。先谢了。

var grid = Ext.getCmp('your_grid_id');   // Enter your grid id
initToolTip(grid); // call function

initToolTip: function(grid) {
var view = grid.view;

// record the current cellIndex
grid.mon(view, {
    uievent: function(type, view, cell, recordIndex, cellIndex, e) {
        grid.cellIndex = cellIndex;
        grid.recordIndex = recordIndex;
    }
});

grid.tip = Ext.create('Ext.tip.ToolTip', {
    target: view.el,
    delegate: '.x-grid-cell',
    trackMouse: true,
    renderTo: Ext.getBody(),
    listeners: {
        beforeshow: function updateTipBody(tip) {
            if (!Ext.isEmpty(grid.cellIndex) && grid.cellIndex !== -1) {
                header = grid.headerCt.getGridColumns()[grid.cellIndex];
                columnText = grid.getStore().getAt(grid.recordIndex).get(header.dataIndex);

                tip.update(columnText);
            }
        }
    }
});

extjs

来源：https://stackoverflow.com/questions/52679341/extjs-grid-cell-tool-tip

1条答案

按热度按时间

6rvt4ljy1#

你可以使用renderer配置为gridcolumn和内部的renderer你可以返回一个html标签与你的data-qtip根据您的记录，你需要显示。
你可以在这里使用工作Fiddle进行检查。
代码：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {

            storeId: 'simpsonsStore',

            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "[email protected]",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "[email protected]",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "[email protected]",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "[email protected]",
                "phone": "555-222-1254"
            }]
        });

        Ext.create('Ext.grid.Panel', {

            title: 'Simpsons',

            store: 'simpsonsStore',

            columns: [{
                text: 'Name',
                dataIndex: 'name',
                renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                    return `<span data-qtip="This is ${value}"> ${value} </span>`;
                }
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],

            height: 200,

            renderTo: Ext.getBody()
        });
    }
});

赞(0）回复(0）举报 9个月前

我来回答

ExtJS -网格单元格工具提示

1条答案

相关问题

热门标签

最新问答