Results 1 to 5 of 5

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

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

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

  3. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

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

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default

    I have integrated the code as follows:

    Code:
    {
    											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?

  5. #4
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

    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'.

  6. #5
    Sencha User
    Join Date
    May 2012
    Posts
    61
    Vote Rating
    2
      0  

    Default

    That worked out perfectly. Thanks a lot!


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
  •