使用meta.tdAttr的网格列渲染器工具提示

时间:2013-08-19 17:42:05

标签: javascript extjs extjs4 rally grid-layout

我一直在尝试添加一个工具提示,当您将鼠标悬停在Ext.grid.Panel中的单元格上时会弹出。

但是,列的渲染器函数的参数“meta”没有tdAttr属性!

renderer : function(value, meta, record, row, col) {
    if (value == 1 && record.data.state === 'Accepted') {
        meta.tdCls = 'green';
        console.log('value',value);
        console.log('meta',meta);
        console.log('meta.tdAttr',meta.tdAttr);
        console.log('meta.style',meta.style);
        meta.tdAttr = 'data-qtip="' + value + '"';
        return record.data.id;
    } else if (value == 1 && record.data.state === 'Initial Version') {
        meta.tdCls = 'white';
        return record.data.id;
    } else if (value == 1) {
        meta.tdCls = 'red';
        return record.data.id;
    } else {
        return '';
    }
}

示例控制台输出:

value 1 
meta Object {tdCls: "", style: ""} 
meta.tdAttr undefined 
meta.style

我觉得我可能会错过网格视图或网格面板上的某些设置,但是对于该属性甚至在meta参数上不可用似乎很奇怪。来自文档:

元数据:对象 关于当前单元格的元数据集合;可以由渲染器使用或修改。已识别的属性包括:tdCls,tdAttr和style。

2 个答案:

答案 0 :(得分:1)

我不知道为什么这个设置不是开始的,但我手动添加它来解决这个问题:

meta['tdAttr'] = 'data-qtip="' + value + '"';

它有效!

答案 1 :(得分:0)

我有动态显示单元格工具提示在操作列中的经验,应该有所帮助。

        {
            xtype: 'actioncolumn',
            name: 'payment',
            width: 70,
            align: 'center',
            dataIndex: 'uid',
            menuDisabled: 'true',
            text: 'xxx',
            sortable: false,
            fixed: 'true',
            renderer: function (value, metadata, record) {
                if (value == '0') {
                    metadata.tdCls = 'pay-icon';
                }
                else {
                    metadata.tdCls = 'paid-icon'
                }
            },
            getTip: function (value, metadata, record) {
                if (value == '0') {
                    return 'for pay';
                } else {
                    return 'paid';
                }
            }
        }