ExtJs 4: How To Add Grid Cell Tooltip

最近忙一个项目的时候需要实现鼠标移到grid的某一行上提示消息。花了半天时间才解决。在网上找很久终于有找到一个有用的。我的版本是extjs4.

效果如图

 

Ext.onReady(function () {
    // Init the singleton.  Any tag-based quick tips will start working.
    Ext.tip.QuickTipManager.init();
 
    Ext.widget('grid', {
        title: 'Users',
        store: {
            fields: ['name', 'email', 'comment'],
            data: [
                { 'name': 'Lisa', 'email': 'lisa@simpsons.com', 'comment': 'some comment' },
                { 'name': 'Bart', 'email': 'bart@simpsons.com', 'comment': 'comment' },
                { 'name': 'Homer', 'email': 'home@simpsons.com', 'comment': 'some very long comment' },
                { 'name': 'Marge', 'email': 'marge@simpsons.com', 'comment': 'some very very very very long comment' }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name', width: 100 },
            { header: 'Email', dataIndex: 'email', width: 150 },
            {
                header: 'comment',
                dataIndex: 'comment',
                flex: 1,
                renderer: function (value, meta, record) {
                    var max = 15;
                    meta.tdAttr = 'data-qtip="' + value + '"';
                    return value.length < max ? value : value.substring(0, max - 3) + '...';
                }
            }
        ],
        width: 400,
        renderTo: 'output'
    });
});

 

参考的原文：http://ext4all.com/post/extjs-4-how-to-add-grid-cell-tooltip