Results 1 to 5 of 5

Thread: Display text on mouse enter/over the display field of the form

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    61

    Default Answered: Display text on mouse enter/over the display field of the form

    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:

    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?

  2. More than one way to do this I suppose, but see if this works:

    Code:
    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'
        }]
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •