The tooltip function getTip is not working for me.
I initialized Ext.tip.QuickTipManager.init();
in my app.json launch function.
My actioncolumn is looking like this:
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'
}
]
It does not call the getTip() function at all. What am i doing wrong?
The docs:
The getTip
function will only work if your action column does not have items
, only a single icon. For example, modifying your code like this does display the tooltip:
{
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}'
},
}
If you have multiple items in the action column, you have to define tooltip separately for each item. You can set the tooltip for one item in the action column using the tooltip
configuration:
{
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',
}
]
}
This is a static tooltip, fixed for one action in the column. If you need it dynamic, for example dependant on the record value, you can use the getClass
function for that for each item:
{
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'
}
]
}