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!
分享到：
相关推荐
Extjs4的textfield控件竟然没有tooltip悬浮提示，这应该算是个bug吧。网上查了很多，也没有方案。后来自己通过查询并整理出这个方案，终于实现了。 思想如下： 在textfield渲染时注册mouseover事件，然后在其中调用...
extjs4.0 技术中文视频讲解，内容非常的全，而且讲的也不错，这是第一部分，里面有下载地址 可用迅雷下载。 第一讲:extjs4.0概述和HELLO WORD程序 第二讲:extjs4.0的新特性 第三讲:extjs4.0数据模型--Model 第...
第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 ...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...
NULL 博文链接：https://northc.iteye.com/blog/1344745
NULL 博文链接：https://mzl-2011.iteye.com/blog/1151199
语言程序设计资料：ExtJs学习笔记-2积分.doc
这是一个简单的在extjs下的grid转化到Excel，里面代码简单易懂，在包里面还集成了复杂的js转化函数，不过本人没有用它来进行转化！ 注：在用EXTJS的导出Excel技术中，一定要注意分页的问题
ExtJS grid过滤操作，可以动态操作本地的store更改筛选的内容
基于Extjs4官方的例子，做了一个关于MVC和Grid增删改的小例子
ExtJS tooltip功能组件实例
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs4下拉菜单中用Grid显示，有单选，和多选两个控件，完美通用代码控件，绝对让你好用，值得收藏^-^
EXTJS grid导出EXCEL文件，源码可以直接导入MYECLIPSE使用，EXTJS版本3.2.0
ExtJs Grid是否选择行，是：返回选择行record;否：返回false