Adding tool tips to grid cells

This recipe teaches you how to add tool tips to the columns of the grid component. The grid created using this recipe will look like this:

How to do it...

1. 1. Start the QuickTips singleton:

   Ext.QuickTips.init();
   

2. 2. Create the fields for the customers grid:

   var custFields = [{
   name:'ID',
   type: 'int'
   },{
   name: 'first_name',
   type: 'string'
   }, {
   name: 'last_name',
   type: 'string'
   }, {
   name:'phone',
   type:'string'
   }, {
   name: 'email',
   type: 'string'
   }]
   

3. 3. Create a Customer record based on the already defined customer fields:

   var Customer = Ext.data.Record.create(custFields);
   

4. 4. Create the data store for the customers grid:

   var customersStore = new Ext.data.JsonStore({
   url: 'grid-cell-qtip.php',
   root: 'customers',
   fields: custFields
   });
   

5. 5. An XTemplate instance defines the format of the tool tips:

   var tpl = new Ext.XTemplate('<div><b>Phone:</b>&nbsp;{phone}</div>',
   '<div><b>Email</b>:&nbsp;{email}</div>');
   

6. 6. Define...