`
qingfeng200468
  • 浏览: 51957 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ExtJS Grid 每个Cell都显示tooltip

阅读更多

     在Ext JS 3.x 中,如果为GridPanel中的每个Cell都显示tooltip时,而内容是就Cell内容时,有一种比较好的方法就是官网推荐的【Ext JS 3.x\src\widgets\tips\ToopTip.js】中的第90行到108行的例子,如下所示

 

var myGrid = new Ext.grid.GridPanel(gridConfig);
myGrid.on('render', function(grid) {
    var store = grid.getStore();  // Capture the Store.
    var view = grid.getView();    // Capture the GridView.
    myGrid.tip = new Ext.ToolTip({
        target: view.mainBody,    // The overall target element.
        delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
        trackMouse: true,         // Moving within the row should not hide the tip.
        renderTo: document.body,  // Render immediately so that tip.body can be
                                  //  referenced prior to the first show.
        listeners: {              // Change content dynamically depending on which element
                                  //  triggered the show.
            beforeshow: function updateTipBody(tip) {
                var rowIndex = view.findRowIndex(tip.triggerElement);
                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
            }
        }
    });
});
 

然而这个例子,只限于显示row,而不适合cell,当我们仿照取列数时

 

var cellIndex = view.findCellIndex(tip.triggerElement); 
 

这时总会返回一个false,于是就到不得Cell对象或内容。经过一段时间的摸索,终于找到的原因,原来上面指定delegate属性为row, 我们只需要改成

 

 delegate: '.x-grid3-cell',

 

 这样我就到得Cell对象,显示tooltip就小事一桩,给个例子供大家参考

 

				listeners : {
					scope : this,
					render: function (grid){
						    //var store = grid.getStore();  // Capture the Store.
						    var view = grid.getView();    // Capture the GridView.
						    grid.tip = new Ext.ToolTip({
						        target: view.mainBody,    // The overall target element.
						        delegate: '.x-grid3-cell', // Each grid row causes its own seperate show and hide.
						        trackMouse: true,         // Moving within the row should not hide the tip.
						        renderTo: document.body,  // Render immediately so that tip.body can be
						        anchor: 'top',
						        listeners: {              // Change content dynamically depending on which element
						                                  //  triggered the show.
						            beforeshow: function updateTipBody(tip) {
						                var rowIndex = view.findRowIndex(tip.triggerElement);
						                var cellIndex = view.findCellIndex(tip.triggerElement);
						                //前三列或大于第八列内容不提示
						                if(cellIndex < 3 || cellIndex >8)return false;
						                var cell = view.getCell(rowIndex, cellIndex);
						                tip.body.dom.innerHTML = cell.innerHTML;
						            }
						        }
						    });
					}
				}

 这时监听只要放在grid中就可以达到效果。

 

如果你的Cell中不是原始的数据,包括编辑框、颜色、图片等,显示时就不是理想的效果,自己可根据实际情况自行过滤。

分享到:
评论
1 楼 henchong 2013-04-16  
支持,很有用处

相关推荐

    Extjs Grid 中的 ToolTip效果

    首先,EXTJS提供了两种主要类型的Tooltip:Ext.tip.ToolTip和Ext.grid.tooltip.GridTip。前者是通用的Tooltip类,适用于任何需要显示提示的地方;后者是专门为Grid定制的,能更好地与Grid的行和列配合工作。 实现...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    ExtJS ToolTip功能

    每个ToolTip都指定了目标元素、显示的信息以及延迟时间等属性。 #### 总结 通过上述示例,我们了解了如何在ExtJS中使用`ToolTip`功能为网格中的每一列提供额外的信息提示。这种方式不仅提高了应用的交互性,也增强...

    EXTJS grid导出EXCEL文件

    在EXTJS中,Grid组件是一个强大的数据展示工具,它允许用户以表格形式查看和操作大量数据。在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 ...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    extjs grid数据导出excel文件

    这包括将数据转换为二维数组,每一行代表一个Grid记录,每一列对应记录的一个字段。 4. **创建并写入工作簿**:利用SheetJS创建一个新的工作簿对象,然后将转换后的数据添加到新的工作表中。 5. **生成Excel文件**...

    EXTJS Grid总结例子

    EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)、View(视图)和Selection Model(选择模型)。Store负责管理数据,Columns定义列的显示和交互,View是用户看到的表格展示,而Selection Model...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    extjs grid 多表头插件

    每个列头都有自己的宽度、对齐方式、排序等属性。 3. GroupingStore(分组存储):当配合使用分组表头时,往往需要使用GroupingStore。GroupingStore会根据指定的字段自动对数据进行分组,并在Grid中展示出来。 4....

    ExtJS GRID单元格合并

    Grid由一系列行(rows)和列(columns)组成,每个单元格(cell)对应一个特定的数据值。在实现单元格合并时,我们需要关注的是`column`配置和`viewConfig`设置。 在创建Grid时,我们通常定义列模型(column model...

    ExtJs grid多选时获取选中的所有值

    其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个组件之一,用于展示表格数据。在实际业务场景中,经常需要支持用户对表格中的多行数据进行选择,并执行批量操作,如删除、编辑等。因此,掌握如何在ExtJs Grid中...

    Extjs grid 中文排序问题修正

    EXTJS Grid的排序功能是基于其内部的Store对象实现的,Store中的每条记录都有一个对应的sortField和sortDir属性,用于记录当前的排序字段和排序方向。当你点击列头进行排序时,Grid会调用Store的sort方法,根据指定...

    Extjs grid分页1

    在这个Store中,我们需要设置`autoLoad`属性为`true`或`false`来决定是否自动加载数据,以及`pageSize`属性来指定每页显示的数据数量。 ```javascript var store = Ext.create('Ext.data.Store', { storeId: '...

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...

    Extjs Grid 扩展实例

    ExtJS Grid是一个强大的数据展示组件,它在Web应用程序中用于显示和操作大量数据。Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,是ExtJS库中的核心组件之一。"Extjs Grid 扩展实例"是一个演示如何增强Grid...

    ExtJS_grid.rar_Grid javascript_extjs grid

    - **Node Interface**:Tree Grid的每个节点都实现了Node Interface,支持节点的增删改查操作。 - **Tree Store**:与普通的Grid Store类似,但处理的是树形数据结构。 - **Expanding and Collapsing**:节点可以...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

Global site tag (gtag.js) - Google Analytics