如何为表格单元格制作工具提示(Ext.grid.Panel)?

时间:2017-04-10 06:58:19

标签: extjs

如何为表格单元格制作工具提示(Ext.grid.Panel)?

在桌子内部,活动' mouseover'并且' mouseout'被封锁:

if (cell && type !== 'mouseover' && type !== 'mouseout') {

http://docs.sencha.com/extjs/6.2.0/classic/src/Table.js-3.html#Ext.view.Table

1 个答案:

答案 0 :(得分:0)

您可以使用以下来自sencha文档的示例

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.tip.ToolTip

请参阅add tooltip to extjs grid to show complete information about that row

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