PDA

View Full Version : How to give tooltip and grid value in extjs 4.1.1 for rowexpander icon on mouse over?



Santra
21 May 2015, 3:16 AM
Hi,

How to give tooltip with dynamic grid value for rowexpander icon in extjs 4.1.1?. I am using row expander plugins and want to give tooltip if + icon then "show all records of 234567" dynamically.

PFB the code snippet.
i have added the below code in the Grid Listeners which has Row Expander Plugin.

i tried to pass the dyanmic record using the function call

function getEmployeeID(value, p, record){
var empVal = record.get('empid');
return empVal;
}


,
afterlayout : function (obj) {
if (obj.view.getNodes().length > 0) {
var nodes = obj.view.getNodes();
for (var i = 0; i < nodes.length; i++) {
var rowNode = nodes[i],
row = Ext.fly(rowNode, '_rowExpander'),
isCollapsed = row.hasCls('x-grid-row-collapsed');
if (isCollapsed)
Ext.DomQuery.selectNode('div.x-grid-row-expander', nodes[i]).title = "Show all details of ";
}
}
}




Tooltip should be : Show all details of 234567.

Thanks in Advance.
Santra

tristan.lee
26 May 2015, 2:05 PM
I was having an issue getting this working in 4.1.1 as a fiddle, but put together a dynamic example using 5.1.1.

This creates 1 tooltip on the body delegated to the x-grid-row-expander class. It only shows if the row is collapsed and dynamically sets the text based on the record data.

You should be able to follow this to replace the text with the empid. Hopefully this helps.

nha

Santra
27 May 2015, 11:53 PM
I was having an issue getting this working in 4.1.1 as a fiddle, but put together a dynamic example using 5.1.1.

This creates 1 tooltip on the body delegated to the x-grid-row-expander class. It only shows if the row is collapsed and dynamically sets the text based on the record data.

You should be able to follow this to replace the text with the empid. Hopefully this helps.

nha

Hi tristan,

Thanks for your reply.:)
Please tell me how to hide the tooltip for the column that does not not have the expander icon.
For an example consider the below image for your reference. The tooltip should not be displayed on the column value 'Marge'. simply wherever icon for expander is displayed there only i should display the message.

52526

tristan.lee
30 May 2015, 6:50 AM
The tooltip is delegated for elements containing the x-grid-row-expander class. Since that row wouldn't contain and expander, the class should not exist, thus a tooltip wouldn't show.

Do you have an example where the expand icon isn't there, but the tooltip is?