`
wxzauh
  • 浏览: 18142 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

ExtJS4中在grid panel的每一行显示qtip

阅读更多
原文地址:

http://existdissolve.com/2011/07/adding-qtips-to-gridpanel-rows-in-extjs-4-0/

解释一下:

在grid panel里columns属性下,为需要显示qtip的column对象加一个renderer属性,它是一个函数,如下:

this.columns = [
{
  text: “Bookmark”,
  dataIndex: “title”,
  flex: 1,

  renderer: function(value,metaData,record,colIndex,store,view) {
      metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘;
      return value;
  }


}]

作者提到,需要注意metaData这个参数,它的属性tdAttr是新版本的Ext才有的,对于旧版本的Ext,则是attr,还有就是data-qtip这里也一样,旧版本的Ext则是ext:qtip。

最后说明一下其中的 value 就是要显示qtip的字符串,可以自己定制,这个函数中有个叫record的参数,里面有存放该行的记录,详情可用console.log(record)打印出来。
分享到:
评论

相关推荐

    extjs grid.panel 项目 源码

    在"extjs grid.panel 项目 源码"中,我们可以深入理解如何利用ExtJS构建一个功能完备的数据网格。 Grid Panel是ExtJS中的一个核心组件,它允许开发者以表格的形式展示大量数据,并提供多种交互功能,如排序、分页、...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

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

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

    ExtJs Grid选择行

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

    ExtJS grid过滤操作

    在myapp4项目中,你可能会找到相关的代码示例,展示了如何在实际应用中配置和使用ExtJS Grid的过滤功能。通过阅读和理解这些代码,你可以更好地理解和应用上述理论知识。 总结来说,ExtJS Grid的过滤操作提供了...

    extjs4打印grid插件

    总的来说,"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具,它为Grid Panel提供了方便的打印功能,极大地丰富了用户体验,特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件,开发者可以更好地...

    Extjs自动最大化panel

    在EXTJS中,"Extjs自动最大化panel"是一种高级布局技术,它允许用户创建一个能够自动适应并填充其容器的面板(Panel)。这种特性对于构建响应式和自适应的用户界面至关重要,尤其在现代Web应用中,用户期望界面能够...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    Extjs4前台前台grid导出excel

    在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...

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

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

    ExtJS 使用grid显示数据

    在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤、编辑等功能。要创建一个Grid,首先需要定义数据模型(Model),它描述了数据的结构,包括字段名和...

    给Extjs的GridPanel增加“合计”行

    在实际应用中,我们经常需要在GridPanel底部显示一行“合计”行,以便对某一列或多列的数据进行求和或其他统计操作。这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要...

    extjs4中panel的accordion布局以及treepanel导航

    在EXTJS4中,Panel和TreePanel是两个非常重要的组件,它们在构建用户界面时扮演着核心角色。本文将深入探讨Panel的accordion布局以及TreePanel的动态导航功能,帮助开发者更好地理解和运用这些特性。 首先,让我们...

    ExtJS5学习之Grid与Grid之间的数据拖拽

    在ExtJS 5中,Grid不仅是一个展示数据的容器,还支持通过拖放操作来实现数据的移动和重新排列。 实现Grid与Grid之间的数据拖拽,主要涉及以下几个关键步骤: 1. **配置DragZone和DropZone**:拖放操作的核心在于...

    extjs grid数据导出excel文件

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

    EXTJS grid导出EXCEL文件

    在EXTJS中,Panel是包含UI元素的基本容器,所以"panelToExcel"可能是从一个Grid Panel导出数据到Excel的函数或类。 要实现EXTJS Grid到Excel的导出,一般会涉及以下几个步骤: 1. **获取Grid数据**:首先,你需要...

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    EXTJS4 表格GRID示例

    EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    Extjs grid 中文排序问题修正

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

Global site tag (gtag.js) - Google Analytics