Blog Archive

ExtJs 4 Grid ToolTip delegate example for Individual cells and elements - Part 2

Click here for previous Chapter
In the previous chapter we discussed various ways we can add a ToolTip to the Grid Cells and buttons in the Toolbar. Here is the complete source code for the tutorial...


ExtJs 4 Grid ToolTip example for Grid Cell using delegate and individual elements

Application starting point index.html

<html>
<head>
    <title>ExtJs 4 ToolTip Tutorial</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

Application JavaScript file app.js

Ext.Loader.setConfig({ 
    enabled: true 
});

Ext.require([
     'Ext.tip.*',
     'Ext.Button'
]);

Ext.application({
    name: 'CN',

    appFolder: 'app',
   
    controllers: [
                  'Countries'
              ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'countryList',
                }
            ]
        });
    }
});

JavaScript source file for the model Country.js

Ext.define('CN.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

JavaScript source file for the Store Countries.js

Ext.define('CN.store.Countries', {
    extend: 'Ext.data.Store',
    model: 'CN.model.Country',
    autoLoad: true,
    pageSize: 15,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            totalProperty: 'totalCount',
            root: 'countries',
            successProperty: 'success'
        },
     }
});

JavaScript source file for the Grid View CountryList.js

Ext.define('CN.view.CountryList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.countryList',
    title : 'List of Countries',
    store : 'Countries',
    loadMask: true,
    height: 400,
    width: 700,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        dock: 'bottom',
        displayInfo: true,
        store: 'Countries', 
        items: [
                { 
                    xtype: 'tbseparator' 
                },
                {
                    id : 'myTip1',
                    xtype : 'button',
                    text: 'ToolTip Example 1',
                    tooltip: 'Tool Tip added in the View definition ...'
                },
                {
                    id : 'myTip2',
                    xtype : 'button',
                    text: 'ToolTip Example 2',
                }
        ]
    }],
    initComponent: function() {
       
        this.columns = [{
            header: 'Country Code', 
            dataIndex: 'code', 
            flex: 1,
            renderer : function(value, metadata, record) {
                myToolTipText = "<b>Tool Tip added using renderer function for country</b>";
                myToolTipText = myToolTipText + "<br/>Code: "+ record.get('name');
                myToolTipText = myToolTipText + "<br/>Name: "+ record.get('name');
                myToolTipText = myToolTipText + "<br/>Continent: "+ record.get('continent');
                myToolTipText = myToolTipText + "<br/>Region: "+ record.get('region');
                metadata.tdAttr = 'data-qtip="' + myToolTipText + '"';
                return value;
            }
        },
            {header: 'Name', dataIndex: 'name', flex: 3}
        ];
        this.callParent(arguments);
    }
});

JavaScript source file for the application controller Countries.js

Ext.define('CN.controller.Countries', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['Countries'],
            //define the models
            models : ['Country'],
            //define the views
            views : ['CountryList'],
           
            refs: [{
                ref: 'myGrid', 
                selector: 'grid'
            }], 
           
            init : function() {
                this.control({
                   
                    'viewport > panel' : {
                        render : this.onPanelRendered
                    },
                    'countryList' : {
                        render : this.onGridRendered
                    },
                    'countryList button[id=myTip2]' : {
                        render : this.onButtonRendered
                    }
                   
                });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel is rendered
                console.log('The panel was rendered');
            },
           
            onGridRendered : function(gridView) {
                console.log('Grid panel was just rendered');
                //create the ToolTip
                gridView.tip = Ext.create('Ext.tip.ToolTip', {
                    // The overall target element.
                    target: gridView.el,
                    // Each grid row causes its own seperate show and hide.
                    delegate: gridView.view.cellSelector,
                    // Moving within the row should not hide the tip.
                    trackMouse: true,
                    // Render immediately so that tip.body can be referenced prior to the first show.
                    renderTo: Ext.getBody(),
                    listeners: {
                        // Change content dynamically depending on which element triggered the show.
                        beforeshow: function updateTipBody(tip) {
                            gridColums = gridView.view.getGridColumns();
                            column = gridColums[tip.triggerElement.cellIndex];
                            //only display the tool tip for name column
                            if(column.dataIndex === 'name'){
                                record = gridView.view.getRecord(tip.triggerElement.parentNode);
                                myToolTipText = "<b>Tool Tip for country added from the controller</b>";
                                myToolTipText = myToolTipText + "<br/>Code: "+ record.get('name');
                                myToolTipText = myToolTipText + "<br/>Name: "+ record.get('name');
                                myToolTipText = myToolTipText + "<br/>Continent: "+ record.get('continent');
                                myToolTipText = myToolTipText + "<br/>Region: "+ record.get('region');
                                tip.update(myToolTipText);
                            }
                            else {
                                return false;
                            }
                        }
                    }
                });
            },
           
            onButtonRendered : function() {
                console.log('The ToolTip Button was rendered');
                //create the ToolTip
                Ext.create('Ext.tip.ToolTip', {
                    target: 'myTip2',
                    html: 'Tool Tip added later from the app controller ...'
                });
            }

});