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

posted @   南侠书生  阅读(638)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
点击右上角即可分享
微信分享提示