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事件，然后在其中调用...
首先，EXTJS提供了两种主要类型的Tooltip：Ext.tip.ToolTip和Ext.grid.tooltip.GridTip。前者是通用的Tooltip类，适用于任何需要显示提示的地方；后者是专门为Grid定制的，能更好地与Grid的行和列配合工作。 实现...
在使用GridHeaderFilters之前，你需要确保已经正确地安装了ExtJS 4.0库，并在项目中引入了所需的文件，通常包括`ext-all.js`（或`ext-debug.js`用于开发环境）以及`filtergrid.js`（或相关源码文件），这个文件包含...
第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 ...
EXTJS4是一个强大的JavaScript框架，主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档翻译版，为开发者提供了详细的API参考和教程，帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...
EXTJS Grid是EXTJS库中的一个核心组件，用于创建数据密集型的表格视图，它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能，包括分页、排序、过滤、编辑等，使得用户可以高效地管理和...
ExtJS Grid是一个强大的数据展示组件，它允许用户以表格的形式查看和操作大量数据。在实际应用中，数据过滤是常见的需求，以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作，以及如何动态地对...
4. **Grid组件**：EXTJS 2.0的Grid组件是其一大亮点，支持分页、排序、过滤和拖放功能，可处理大量数据并提供高效的显示效果。源码分析有助于理解其背后的性能优化策略。 5. **表单元素**：EXTJS 2.0提供了丰富的...
在给定的"Extjs4 grid使用例子"中，我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分，它提供了一个灵活的、可定制的数据展示网格，通常用于显示和操作大量数据。 1. **...
EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件，用于展示数据并提供交互功能。EXTDRID（可能是EXTGRID的拼写错误）是指EXTJS中的Grid Panel，它允许开发者构建灵活、可配置的数据视图，适用于大量...
4. **源码使用**：提到“源码可以直接导入MYECLIPSE使用”，这意味着提供的是一个实际的代码示例，你可以直接在MyEclipse（一个流行的Java集成开发环境）中打开并运行，以便学习和理解如何实现EXTJS Grid到Excel的...
在EXTJS4中，ComboBox是一个常用的组件，它用于创建下拉选择框，通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而，根据你的标题和描述，你似乎遇到了一个特别的...
ExtJs4+Web参考项目是基于EXTJS4框架的一个完整的Web开发示例，它涵盖了EXTJS4的主要功能和组件，为开发者提供了丰富的实践素材。EXTJS4是一个强大的JavaScript库，专用于构建富客户端的Web应用，它提供了丰富的UI...
### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中，`ToolTip`功能是一种非常实用且灵活的功能，它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...
语言程序设计资料：ExtJs学习笔记-2积分.doc
这是一个简单的在extjs下的grid转化到Excel，里面代码简单易懂，在包里面还集成了复杂的js转化函数，不过本人没有用它来进行转化！ 注：在用EXTJS的导出Excel技术中，一定要注意分页的问题
### ExtJs Grid 多选及获取选中值详解 #### 一、背景介绍 在Web应用开发中，ExtJs 是一款非常强大的JavaScript框架，它能够帮助开发者快速构建复杂的用户界面。其中，Grid Panel（简称 Grid）是ExtJs中最常用的一个...
在EXTJS4中，`ComboBox` 是一个非常常用的组件，它提供了一个下拉选择框的功能。在某些场景下，我们可能需要在下拉菜单中展示更丰富的信息，比如表格数据，这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
在EXTJS中，Grid控件是用于展示大量结构化数据的关键组件，具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先，我们要明白EXTJS Grid的数据导出到Excel的过程通常...