PDA

View Full Version : Adding Tooltip to Grid Row



harman
21 Mar 2012, 4:08 AM
Hi All,

Can anyone suggest how can i add tooltip to some (not all) ExtJS grid rows.
Note that i want to add it to rows not only column or cells.

vietits
21 Mar 2012, 6:09 AM
function createTooltip(view) {
view.tip = Ext.create('Ext.tip.ToolTip', {
// The overall target element.
target: view.el,
// Each grid row causes its own seperate show and hide.
delegate: view.itemSelector,
// Moving within the row should not hide the tip.
trackMouse: true,
// Render immediately so that tip.body can be referenced prior to the first show.
renderTo: Ext.getBody(),
listeners: {
// Change content dynamically depending on which element triggered the show.
beforeshow: function (tip) {
var tooltip = view.getRecord(tip.triggerElement).get('tooltip');
if(tooltip){
tip.update(tooltip);
} else {
tip.on('show', function(){
Ext.defer(tip.hide, 10, tip);
}, tip, {single: true});
}
}
}
});
}
Ext.QuickTips.init();

var grid = Ext.create('Ext.grid.Panel', {
...
viewConfig: {
listeners: {
render: createTooltip
}
}
...
});

whirling dervish
21 May 2012, 6:36 AM
I recommend taking a look at http://www.sencha.com/forum/showthread.php?205742-Tooltips-on-column-cells for a more straight forward way.

Here it is just in case the other thread gets deleted,



function renderTip(val, meta, rec, rowIndex, colIndex, store) {
// meta.tdCls = 'cell-icon'; // icon
meta.tdAttr = 'data-qtip="Icon Tip"';
return val;
};

{ dataIndex: 'type_name', header: 'Type', renderer: renderTip },

keltik
30 Jun 2014, 6:11 AM
I recommend taking a look at http://www.sencha.com/forum/showthread.php?205742-Tooltips-on-column-cells for a more straight forward way.

Here it is just in case the other thread gets deleted,



function renderTip(val, meta, rec, rowIndex, colIndex, store) {
// meta.tdCls = 'cell-icon'; // icon
meta.tdAttr = 'data-qtip="Icon Tip"';
return val;
};

{ dataIndex: 'type_name', header: 'Type', renderer: renderTip },


Hi i am new to ExtJs.
I am trying to create a minimal "grid-helloworld" example project. The grid is showing with all Dummy-Data provided, but the tooltip using the above function ist not.

I have copied the code snippet into my helloext.js, which looks like this:

Ext.onReady(function() {
//FOR TOOLTIP FUNCTIONALITY
function renderTip(val, meta, rec, rowIndex, colIndex, store) {
// meta.tdCls = 'cell-icon'; // icon
meta.tdAttr = 'data-qtip="Icon Tip"';
return val;
};
//FOR TOOLTIP FUNCTIONALITY


// DATA MODEL
Ext.define('MyDataModel', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
// DATA MODEL

// DUMMY DATA
var userStore = Ext.create('Ext.data.Store', {
model: 'MyDataModel',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
});
// DUMMY DATA

// DISPLAY DATA
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
title: 'Table Title',
columns: [
{
text: 'Name',
dataIndex: 'name',
renderer: renderTip
},
{
text: 'Email Address',
dataIndex: 'email',
},
{
text: 'Phone Number',
dataIndex: 'phone'
}
]
});
// DISPLAY DATA

});

Does anybody have a clue why the tooltip is not showing, when hovering over the individual "names" in the Names-column ?

n_milushev@applss.com
30 Jul 2014, 6:55 AM
Hello!
I think your hello world is working just fine. Here's a fiddle that I've created from it: https://fiddle.sencha.com/#fiddle/889