转：ExtJS 4: How to add Tooltip to Grid Header
This tutorial will walk through out how to add a tooltip to a Grid Header. This feature is not natively supported by Ext JS 4 API. Fortunately, there is a third-party plugin we can use to do it.
To get started, I created a JavaScript project on Eclipse IDE and it looks like this:
Plugin Code
The first thing we have to add (after Ext JS 4 SDK) is the plugin. To do so, I created a folder ux (for plugins) and a folder called grid (inside ux) because it is a plugin for Ext 4 grid. Then I created a file name HeaderToolTip.js with the following content:
/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace ux.grid
*
* Text tooltips should be stored in the grid column definition
*
* Sencha forum url:
* http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',
init : function(grid) {
var headerCt = grid.headerCt;
grid.headerCt.on("afterrender", function(g) {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function(tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id +']');
if (c && c.tooltip)
tip.update(c.tooltip);
else
return false;
}
}
});
});
}
});
Grid with Header Tooltip
Now we need to build the application code. To test, simply create a data grid:
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.HeaderToolTip'
]);
Ext.onReady(function() {
var myData = [
['3m Co'],
['Alcoa Inc'],
['Altria Group Inc'],
['American Express Company'],
['American International Group, Inc.'],
['AT&T Inc.'],
['Boeing Co.'],
['Caterpillar Inc.'],
['Citigroup, Inc.'],
['E.I. du Pont de Nemours and Company'],
['Exxon Mobil Corp'],
['General Electric Company']
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'}
],
data: myData
});
Ext.create('Ext.grid.Panel', {
store: store,
plugins: ['headertooltip'],
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
tooltip: 'Some tooltip'
}
],
height: 200,
width: 200,
title: 'Grid with Header Tooltip',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
On line 1, we have to enable the Ext.Loader so Ext can dynamic loading the files we need.
On lines 3-7 we declared the components we need to have loaded before loading our application. Note the Ext.ux.grid.HeaderTooltip.js is included as well. This way, Ext JS knows it has to look for a file called HeaderTooltip.js inside the folder ux/grid.
Then on line 35 we have to include the HeaderTooltip plugin as a plugin of the grid we want to display a header tooltip.
And finally, on line 42 we need to declared a column config called tooltip with the header tooltip we want to display.
HTML Page
Then we can create an HTML file we can run on a browser:
<html>
<head>
<title>Grid with Header Tooltip</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="grid-example" style="padding:20px;"></div>
</body>
</html>
And when we execute the application, we will get the following:
And it is done!
To get started, I created a JavaScript project on Eclipse IDE and it looks like this:
Plugin Code
The first thing we have to add (after Ext JS 4 SDK) is the plugin. To do so, I created a folder ux (for plugins) and a folder called grid (inside ux) because it is a plugin for Ext 4 grid. Then I created a file name HeaderToolTip.js with the following content:
/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace ux.grid
*
* Text tooltips should be stored in the grid column definition
*
* Sencha forum url:
* http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',
init : function(grid) {
var headerCt = grid.headerCt;
grid.headerCt.on("afterrender", function(g) {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function(tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id +']');
if (c && c.tooltip)
tip.update(c.tooltip);
else
return false;
}
}
});
});
}
});
Grid with Header Tooltip
Now we need to build the application code. To test, simply create a data grid:
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.HeaderToolTip'
]);
Ext.onReady(function() {
var myData = [
['3m Co'],
['Alcoa Inc'],
['Altria Group Inc'],
['American Express Company'],
['American International Group, Inc.'],
['AT&T Inc.'],
['Boeing Co.'],
['Caterpillar Inc.'],
['Citigroup, Inc.'],
['E.I. du Pont de Nemours and Company'],
['Exxon Mobil Corp'],
['General Electric Company']
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'}
],
data: myData
});
Ext.create('Ext.grid.Panel', {
store: store,
plugins: ['headertooltip'],
columns: [
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
tooltip: 'Some tooltip'
}
],
height: 200,
width: 200,
title: 'Grid with Header Tooltip',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
});
On line 1, we have to enable the Ext.Loader so Ext can dynamic loading the files we need.
On lines 3-7 we declared the components we need to have loaded before loading our application. Note the Ext.ux.grid.HeaderTooltip.js is included as well. This way, Ext JS knows it has to look for a file called HeaderTooltip.js inside the folder ux/grid.
Then on line 35 we have to include the HeaderTooltip plugin as a plugin of the grid we want to display a header tooltip.
And finally, on line 42 we need to declared a column config called tooltip with the header tooltip we want to display.
HTML Page
Then we can create an HTML file we can run on a browser:
<html>
<head>
<title>Grid with Header Tooltip</title>
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="grid-example" style="padding:20px;"></div>
</body>
</html>
And when we execute the application, we will get the following:
And it is done!