javascript tooltip函数getTip()在actioncolumn Extjs 7.X上不工作

fkvaft9z  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(101)

工具提示函数getTip对我不起作用。
我在app.json启动函数中初始化了Ext.tip.QuickTipManager.init();
我的行动专栏看起来是这样的:

xtype: 'actioncolumn',
getTip: function(value, metadata, record, rowIndex, colIndex, store) {
    return "something";
},
flex: 0.75,
style: 'text-align: left;',
width: 25,
align: 'center',
menuDisabled: true,
bind: {
    text: '{filename}'
},
items: [
    {
        handler: function(view, rowIndex, colIndex, item, e, record, row) {
            Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
        },
        getClass: function(v, metadata, r, rowIndex, colIndex, store) {
        return "x-far fa-file-alt";
        },
        iconCls: 'x-far fa-file-alt'
    }
]

它根本不调用getTip()函数。我做错了什么?
文档:
getTip()文档由 Sencha 编写

m1m5dgzv

m1m5dgzv1#

getTip函数仅在您的操作列没有items,只有一个图标时才有效。例如,像这样修改代码确实会显示工具提示:

{
    xtype: 'actioncolumn',
    // this works with items, with one icon
    getTip: function(value, metadata, record, rowIndex, colIndex, store) {
        return "something";
    },
    iconCls: 'x-far fa-file-alt',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
}

如果操作列中有多个项目,则需要为每个项目单独定义工具提示。您可以使用tooltip配置为操作列中的一项设置工具提示:

{
    xtype: 'actioncolumn',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
    items: [
        {
            handler: function(view, rowIndex, colIndex, item, e, record, row) {
                Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
            },
            getClass: function(v, metadata, r, rowIndex, colIndex, store) {
                return "x-far fa-file-alt";
            },
            iconCls: 'x-far fa-file-alt',
            // add this for fixed tooltip on the item
            tooltip: 'something',
        }
    ]
}

这是一个静态工具提示,针对列中的一个操作进行了修复。如果你需要它是动态的,例如依赖于记录值,你可以使用getClass函数来为每个项目:

{
    xtype: 'actioncolumn',
    flex: 0.75,
    style: 'text-align: left;',
    width: 25,
    align: 'center',
    menuDisabled: true,
    bind: {
        text: '{filename}'
    },
    items: [
        {
            handler: function(view, rowIndex, colIndex, item, e, record, row) {
                Application.fireEvent("filefunction", view, rowIndex, colIndex, item, e, record, row);
            },
            getClass: function(v, meta, r, rowIndex, colIndex, store) {
                // set dynamic tooltip with these two lines
                var tooltip = 'something dynamic';
                meta.tdAttr = Ext.String.format('data-qtip="{0}"', tooltip);
                return "x-far fa-file-alt";
            },
            iconCls: 'x-far fa-file-alt'
        }
    ]
}

相关问题