`

extjs grid renderer一点应用说明

阅读更多

       在使用extjs前端技术做项目开发时,我们都会遇到一些特殊的应用,不如在grid列中显示不同的颜色,或者在显示超链接,这样都会用到grid的列渲染模型,针对这种需求,extjs官方也有很好的解释,在这里我们先看一下renderer都有哪些参数我们可以使用。

renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){

}

1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id,id不知道是干啥的,似乎是列号,css是这个单元格的css样式。
3.record是这行的所有数据,你想要什么,record.data["id"]这样就获得了。
4.rowIndex是行号,不是从头往下数的意思,而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store,这个厉害,实际上这个是你构造表格时候传递的ds,也就是说表格里所有的数据,可以随时调用。


具体实例如下:

function renderSex(value) {
if (value == ‘male’) {
return “<span style=’color:red;font-weight:bold;’>红男</span>”;//引号里边可以随便加你想要的样式
      } 
分享到:
评论

相关推荐

    extjs grid

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

    extjs grid示例代码

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

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

    Extjs Grid 扩展实例

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

    ExtJS_grid.rar_Grid javascript_extjs grid

    ExtJS Grid是一款强大的JavaScript组件,用于在Web应用中创建数据密集型的表格视图。它由Sencha公司开发,是Ext JS库的核心部分,广泛应用于企业级应用的前端开发,提供丰富的功能和高度的可定制性。这个"ExtJS_grid...

    Extjs Grid 中的 ToolTip效果

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。在实际应用中,为了提供更好的用户体验,我们经常需要在鼠标悬停在某个单元格或列头时显示额外的信息,这就是ToolTip的效果。EXTJS ...

    ExtJs6.5Grid列表导出(包含样式)

    以上是实现ExtJs 6.5 Grid列表导出的基本流程,需要注意的是,这个过程可能需要根据具体的应用场景进行调整,例如处理复杂的数据格式、自定义渲染器、分页等。在实际开发中,可以封装成一个通用的Grid导出组件,以供...

    ExtJS 使用grid显示数据

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是在Web前端开发中。它提供了大量的组件和功能,包括网格(Grid)这种常用的数据显示控件。这篇博客文章 "ExtJS 使用grid显示数据" 可能详细...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    在本文中,我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`,以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库,专用于构建富客户端应用程序,尤其适用于创建复杂的、...

    extjs grid设置某列背景颜色和字体颜色的实现方法

    首先,我们要理解EXTJS Grid中的`renderer`函数。这个函数是用来格式化和渲染网格单元格的内容。通过定义`renderer`,我们可以自定义单元格的显示方式,包括改变颜色、添加链接等。例如: ```javascript { header:...

    EXTJS单元格变色、行变色

    EXTJS是一个功能强大且流行的JavaScript框架,用于构建复杂的Web应用程序。其中,Grid Panel是EXTJS中最常用的组件之一,用于展示和编辑数据。本文将详细介绍EXTJS实现单元格变色、行变色的方法。 单元格变色 在...

    extjs grid设置某列背景颜色和字体颜色的方法

    例如,我们可以创建一个CSS类(如`.x-grid-back-red`),然后在`renderer`函数中将这个类应用到对应的单元格上。以下是一个例子: ```javascript { header: '分成类型', dataIndex: 'divideType', renderer: ...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    总的来说,掌握ExtJS的Tree和Grid组件,特别是Buffer Grid和Progress Grid的使用,对于构建高效、交互丰富的Web应用至关重要。通过不断实践和学习,可以提升开发效率,创造出满足用户需求的高质量应用。

    extjs中grid中嵌入动态combobox的应用

    在EXTJS应用中,将动态Combobox嵌入Grid可以提供丰富的交互体验,用户可以在Grid的单元格中直接选择下拉列表中的值,同时,通过自定义的renderer函数确保数据显示的正确性。这种做法在数据管理界面中非常常见,特别...

    extjs 学习笔记(三) 最基本的grid

    在EXTJS中,Grid组件是数据展示的核心,它允许用户以表格形式查看和操作大量数据。EXTJS的Grid具有丰富的特性和...EXTJS的Grid组件不仅提供了基础的数据展示,还有许多高级特性,使其成为Web应用中处理数据的得力工具。

    Extjs+Gride使用方法

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序,而Grid是ExtJS中的一个核心组件,用于展示数据表格。在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。...

    Extjs 实现多行合并(rowspan)效果

    在ExtJS中实现多行合并(rowspan)的效果,通常是为了在数据表格中展示具有层次结构的数据,或者在某些特定情况...总的来说,这是一次对ExtJS高级特性的实践应用,对于理解ExtJS的自定义能力和数据展示策略非常有帮助。

    Extjs grid添加一个图片状态或者按钮的方法

    然后,我们需要将这个 `renderer` 函数应用到对应的列定义中: ```javascript columns: [{ header: '状态', dataIndex: 'status', // 假设这一列的dataIndex为'status' width: 80, align: 'center', renderer:...

    ExtJs表格点击超链接获取行的值

    在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对单元格进行自定义渲染。 **代码示例*...

Global site tag (gtag.js) - Google Analytics