PDA

View Full Version : Display text on mouse enter/over the display field of the form



cahello
28 Nov 2012, 8:04 AM
I have a xtype: 'displayfield'. I want to display a text when the mouse crosses over the displayfield. How can I do this? The following is an example snippet of my code:


{
xtype:'form',
height: 160,
width: 440,
bodyPadding: 20,
defaults:{
labelWidth: 140,
padding: '0 0 10 0',
},
id: 'form2',
items:[{
xtype: 'displayfield',
fieldLabel: 'X',
id: 'x',
name: 'x',
value :'<html><font size ="2"></font>'+record.data.x+'</html>',
},{
xtype: 'displayfield',
fieldLabel: 'Y',
id: 'y',
name: 'y',
value :'<html><font size ="2"></font>'+record.data.y+'</html>',
},{
xtype: 'displayfield',
fieldLabel: 'Z',
id: 'z',
name: 'z',
value :'<html><font size ="2"></font>'+record.data.z+'</html>',
}]
}


Like the above, I have another set of displayfield, 'a', 'b', 'c' in the same window as the x,y,z. I want to display some relevant text for each of these displayfields when the user passes the mouse over each of these fields. What are the mouse events and how can I implement them?

slemmon
28 Nov 2012, 10:36 AM
More than one way to do this I suppose, but see if this works:



Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 175,
height: 120,
bodyPadding: 10,
title: 'Final Score',
myTooltip: Ext.create('Ext.tip.ToolTip', {
renderTo: Ext.getBody()
}),
defaults: {
listeners: {
boxready: function (field) {
field.el.on({
mouseover: function (e) {
var tip = field.up('form').myTooltip;
tip.update(field.myCustomText);
tip.showAt(e.getXY());
}
, mouseout: function () { field.up('form').myTooltip.hide(); }
});
}
}
},
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
myCustomText: 'Home custom text',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
myCustomText: 'Visitor custom text',
name: 'visitor_score',
value: '11'
}],
buttons: [{
text: 'Update'
}]
});

cahello
29 Nov 2012, 7:30 AM
I have integrated the code as follows:


{
xtype:'form',
height: 160,
width: 440,
bodyPadding: 20,
myTooltip: Ext.create('Ext.tip.ToolTip', {
renderTo: Ext.getBody(),
}),
id: 'form2',
defaults: {
labelWidth: 140,
padding: '0 0 10 0',
listeners: {
boxready: function (field) {
field.el.on({
mouseover: function (e) {
var tip = field.up('form2').myTooltip;
tip.update(field.myCustomText);
tip.showAt(e.getXY());
}
, mouseout: function () { field.up('form2').myTooltip.hide(); }
});
}
}
},
items:[{
xtype: 'displayfield',
fieldLabel: 'X',
id: 'x',
name: 'x',
myCustomText: 'X',
value :'<html><font size ="2"></font>'+record.data.x+'</html>',
},{
xtype: 'displayfield',
fieldLabel: 'Y',
id: 'y',
name: 'y',
myCustomText: 'Y',
value :'<html><font size ="2"></font>'+record.data.y+'</html>',
},{
xtype: 'displayfield',
fieldLabel: 'Z',
id: 'z',
name: 'z',
myCustomText: 'Z',
value :'<html><font size ="2"></font>'+record.data.z+'</html>',
}]
}]
},


The 'xtype: form' is a part of a window which appears when a grid item is clicked. I am getting an error:

"Cannot Read Property 'mytooltip' of undefined".

Where am I going wrong?

slemmon
29 Nov 2012, 7:44 AM
In this line:
var tip = field.up('form2').myTooltip;

try:
var tip = field.up('#form2').myTooltip;

When you use up (or other component selector methods) if you use just quotes 'form2' then it's looking for a component of xtype: form2. When you use id or itemId you'll need to put a # in front of the id in the selector like '#form2'.

cahello
29 Nov 2012, 7:52 AM
That worked out perfectly. Thanks a lot!

:)