1. #1
    Ext User
    Join Date
    Aug 2009
    Posts
    31
    Vote Rating
    0
    Vijaya436 is on a distinguished road

      0  

    Default Hi all, My requirement is to apply tooltip to the ComboBox on the hover of the mouse

    And this is my Code I tried..

    function prepareAverageWorkExpCombo(emptyValueText) {
    var averageWorkExpStore = new Ext.data.SimpleStore( {
    fields : [ 'workExp' ],
    data : Ext.data.workExp
    });
    var averageWorkExpCombo = new Ext.form.ComboBox( {
    store : averageWorkExpStore,
    displayField : 'workExp',
    typeAhead : true,
    id : 'averageWorkExperiance',
    hideLabel : true,
    mode : 'local',
    triggerAction : 'all',
    emptyText : 'Any',
    selectOnFocus : true,
    resizable : true,
    width:100,
    listeners : {
    'change' : comboBoxListener
    }
    });

    var tt = new Ext.ToolTip({
    target: 'track-tip',
    title: 'Mouse Track',
    width:200,
    html: 'This tip will follow the mouse while it is over the element',
    trackMouse:true
    });
    return averageWorkExpCombo;
    }

    Where am I going wrong. Any small help wil be of great help.
    Thanks in Advance
    Regards,
    Vijaya

  2. #2
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281
    Vote Rating
    3
    dlbjr is on a distinguished road

      0  

    Default Try this

    Code:
    var averageWorkExpCombo = new Ext.form.ComboBox({
         store: averageWorkExpStore,
         displayField: 'workExp',
         typeAhead: true,
         hideLabel: true,
         mode: 'local',
         triggerAction: 'all',
         emptyText: 'Any',
         selectOnFocus: true,
         resizable: true,
         width: 100,
         listeners: {
    'change': comboBoxListener
         }
    });
     
    
    var tt = new Ext.ToolTip({
         target: averageWorkExpCombo,
         title: 'Mouse Track',
         width: 200,
         html: 'This tip will follow the mouse while it is over the element',
         trackMouse: true
    });
    
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    dlbjr.consulting@gmail.com

    Owner of:
    Attractive Graphics - "custom screen printing"
    attractivegraphicscsp@gmail.com

  3. #3
    Ext User
    Join Date
    Aug 2009
    Posts
    31
    Vote Rating
    0
    Vijaya436 is on a distinguished road

      0  

    Default

    Thnks for ur help dlbjr.. I tried that but I am getting the error at
    "target:averageWorkExpCombo" as "this.target is null or not an Object".
    Should I add some .js file??? I added ToolTip.js and tried.
    Regards,
    Vijaya

  4. #4
    Sencha User dlbjr's Avatar
    Join Date
    Oct 2007
    Location
    Cache, OK USA
    Posts
    281
    Vote Rating
    3
    dlbjr is on a distinguished road

      0  

    Default The target?

    The target will be what ever variable you make the Combo box as.
    dlbjr - David L. Bryant Jr.

    Owner of
    dlbjr Technology Consulting
    Web2 System Developer & Consultant
    Focused on C.I. - Six Sigma - Shingo - Lean Technologies
    dlbjr.consulting@gmail.com

    Owner of:
    Attractive Graphics - "custom screen printing"
    attractivegraphicscsp@gmail.com

  5. #5
    Ext User
    Join Date
    Sep 2009
    Posts
    26
    Vote Rating
    0
    syedarshadali is on a distinguished road

      0  

    Default

    Quote Originally Posted by Vijaya436 View Post
    Thnks for ur help dlbjr.. I tried that but I am getting the error at
    "target:averageWorkExpCombo" as "this.target is null or not an Object".
    Should I add some .js file??? I added ToolTip.js and tried.

    Just try that:

    Code:
    var tt = new Ext.ToolTip({
         target: averageWorkExpCombo.geEl(),
         title: 'Mouse Track',
         width: 200,
         html: 'This tip will follow the mouse while it is over the element',
         trackMouse: true
    });

  6. #6
    Sencha User sdesalas's Avatar
    Join Date
    Mar 2010
    Posts
    9
    Vote Rating
    0
    sdesalas is on a distinguished road

      0  

    Default

    Simpler approach, you can just override the template (ExtJS v 3.4) and set the html "title" field directly:


    Code:
    new Ext.form.ComboBox({
         store: store,
         displayField: 'name',
         typeAhead: true,
         hideLabel: true,
         mode: 'local',
         triggerAction: 'all',
         tpl: '<tpl for="."><div class="x-combo-list-item" title="{description}">{name}</div></tpl>',
    });
    Steven de Salas
    Web and UI Developer
    Desalasworks