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:
1. Start the
QuickTips
singleton:Ext.QuickTips.init();
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. Create a
Customer
record based on the already defined customer fields:var Customer = Ext.data.Record.create(custFields);
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. An
XTemplate
instance defines the format of the tool tips:var tpl = new Ext.XTemplate('<div><b>Phone:</b> {phone}</div>', '<div><b>Email</b>: {email}</div>');
6. Define...