Sunday, April 22, 2012

ExtJs Tooltip


Tooltip in ExtJs - There are various ways to get tooltip in ExtJs, we will explore different options in below list.

1. Tooltip in Grid header -
new Ext.grid.GridPanel({
        store: store,
        columns: [
                       {
                           id       :'company',
                           header   : 'Company',
                           tooltip  : 'Company Name', 
                        width    : 160, 
                        sortable : true, 
                        dataIndex: 'company'
                    },….
            ]
            })

2. Get Tooltip on all the grid options – You need to use metadata attribute to set the tooltip on the grid items. Consider below example where pctChange is renderer on grid column.
    function pctChange(val, metadata) {
            metadata.attr = String.format('{0}title="{1}"', metadata.attr, val);

    }

3.  Tooltip on other form items –
 {
    xtype           :   'textfield',
    fieldLabel   :    “<span ex:qtip=’Please Contact admin for more info.’>Comments</span>”,
    ref               :    'comtext'
 }

if you want html behavior on the tooltip, you can provide tags in span –

{
   xtype           :   'textfield',
   fieldLabel   :    “<span ex:qtip=’<b>Please Contact admin for more info.</b><br>admin@test.com’>Comments</span>”,
   ref               :    'comtext'
}

4. Other common and most asked place for tooltip is on drop down/combo, which is tough to achieve as there is no default way to get it, you have to use various tricks to get it...coming soon…

Feel free to drop comments, questions!

No comments:

Post a Comment