Ext.js中的tip事件实际使用

复制代码
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': '张三', 'email': 'aaaaaaaaaa.com', 'comment': 'some comment' },
                    { 'name': '李四', 'email': 'bbbbbbbbbb.com', 'comment': 'comment' },
                    { 'name': '王五', 'email': 'cccccccccc.com', 'comment': 'some very long comment' },
                    { 'name': '马六', 'email': 'dddddddddd.com', 'comment': 'some 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'
        });
    });
复制代码

 

grid中的显示:

初始化:

Ext.tip.QuickTipManager.init();

判断:

if (columns[i].tooltipType && columns[i].tooltipType === 'qtip') {
                    columns[i].renderer = function (value, meta, record) {
                        meta.tdAttr = 'data-qtip="' + value + '"';
                        return value;
                    }
                }

 

posted @   雪?  阅读(619)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
点击右上角即可分享
微信分享提示