`
Action-人生
  • 浏览: 102950 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ExtJS renderer的用法 .

Ext 
阅读更多
http://www.cnblogs.com/hanyun/archive/2012/04/17/2453438.html
var cm = new Ext.grid.ColumnModel(
            [
            new Ext.grid.RowNumberer({ header: "", width: 20, align: 'center' }),
            { header: '', align: 'center', dataIndex: 'AccountAndRoseID', width: 50, sortable: true, hidden: true },
            { header: '', align: 'center', dataIndex: 'UserAccountId', width: 50, sortable: true, hidden: true },
            { header: '帐号', align: 'center', dataIndex: 'UserAccountName', width: 200, sortable: true },
            { header: '角色名', align: 'center', dataIndex: 'UserRoleName', width: 200, sortable: true },
            { header: '状态', align: 'center', dataIndex: 'UserAccountStateId', width: 200, sortable: true, hidden: true, renderer: function() }
]

renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子(我目前是这么理解的)
先看下renderer: function()里的参数

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,也就是说表格里所有的数据,你都可以随便调用,唉,太厉害了。
分享到:
评论

相关推荐

    Extjs Grid 扩展实例

    在ExtJS中,我们可以通过`Ext.extend()`或使用`Ext.define()`方法创建一个新的类,该类继承自现有类并可以添加新的属性和方法。对于ExtJS Grid,我们可能要扩展其基础配置,比如自定义列、行渲染器、编辑器,甚至是...

    Extjs+Gride使用方法

    通过以上步骤,你已经掌握了基本的ExtJS Gride使用方法。当然,ExtJS提供了大量的API和配置选项,可以根据项目需求进一步定制和优化Grid的功能,例如行编辑、列重排、自定义分页样式等。在实际开发中,不断学习和...

    EXTJS.GRIDPANEL 日期格式

    在深入探讨ExtJS.GridPanel中的日期格式设置之前,我们首先简要回顾一下ExtJS是什么以及GridPanel组件的基本功能。ExtJS是一个用JavaScript编写的开源框架,用于构建交互式的Web应用程序,它提供了丰富的UI组件和...

    EXTJS单元格变色、行变色

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

    extjs3合并表头 rowspan

    在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext.grid.GroupingView`或自定义的视图类。表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于...

    EXTjs4.0以下合并表格

    6. **Ext.util.Renderable**: 如果选择扩展EXTjs的基本组件,可能需要深入理解`Ext.util.Renderable`类,它是EXTjs中所有可视组件的基类,提供了渲染和布局的基础方法。 7. **CSS样式**: 除了JavaScript代码,合并...

    Extjs表格合并代码

    3. 利用ExtJS的`renderer`函数,根据数据动态调整单元格的样式。 4. 使用条件判断语句,针对不同的浏览器使用不同的CSS修复。 总结,实现ExtJS表格合并代码的关键在于理解表格组件的结构、配置和模板机制,并能妥善...

    extjs动态树的示例代码.rar

    7. **模板和渲染器**:为了自定义节点的显示样式,可以使用`text`字段或者定义`displayField`,并可能使用模板(`tpl`)或渲染器(`renderer`)来处理节点的显示内容。 8. **拓展功能**:动态树还可以实现拖放操作...

    汇总Extjs中GridPanel的各个属性与方法.doc.pdf

    ExtJS中的GridPanel是用于展示数据的组件,它...以上就是关于ExtJS中GridPanel及其相关组件的主要属性和方法的详细解释,这些配置和方法为开发人员提供了极大的灵活性,使得能够根据需求创建各种复杂的表格布局和交互。

    ExtJs中处理后台传过来的date对象显示到页面上

    在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型...

    Extjs4.2 根据不同的数值设置tabpanel行的背景颜色

    例如,在使用ExtJS框架构建的应用程序中,可以根据某个特定字段的值来改变表格中行的背景颜色,从而突出显示某些关键信息。本文将详细介绍如何在ExtJS 4.2版本中实现这一功能。 #### 二、技术背景 **ExtJS** 是一...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    Extjs Grid 中的 ToolTip效果

    通过以上方法,我们可以在EXTJS Grid中实现各种丰富的Tooltip效果,提供更佳的数据展示体验。无论是简单的文本提示,还是包含复杂信息的自定义组件,EXTJS都提供了足够的灵活性来满足需求。在开发过程中,记得结合...

    Extjs学习—总结的extjs的一些常用小知识点

    4. **`renderer` 方法** - 作用:自定义渲染函数。 - 示例代码:`renderer: showDetail` - 说明:定义了一个名为 `showDetail` 的函数作为渲染器,用于自定义单元格内容的显示方式。 5. **`showDetail` 函数** ...

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

    遍历Grid的所有Column,根据Column的配置项,如`width`、`align`、`renderer`等,构建对应的CSS规则。 3. **表格构建**:使用JavaScript创建一个新的HTML `<table>`元素,并填充数据。对于每个记录,创建一个`<tr>`...

    ExtJS制作折线图

    使用`chart.update()`方法可以轻松实现这一点。 通过以上步骤,你可以使用ExtJS创建一个动态的、支持任意多条折线的lineChart。在实际应用中,根据项目需求进行调整和优化,例如添加动画效果、自定义颜色、调整布局...

    extjs实现报表

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件和工具,包括用于创建复杂数据展示的报表功能。...不断学习和实践,你将能掌握更多关于在ExtJS中实现报表的技巧和方法。

    extjs3多表头

    下面将详细介绍如何使用ExtJS 3创建多表头,以及相关的配置项和方法。 1. **创建多表头的基本结构** - 首先,你需要创建一个包含主表头的ColumnModel。主表头通常包含一系列列。 - 然后,对于需要设置为子表头的...

    extjs 5 combogrid控件

    9. **扩展性**:Combogrid作为ExtJS的一个组件,可以与其他组件配合使用,例如和表格面板(grid panel)、表单(form)等进行集成,构建复杂的应用界面。 在`ext-form-field-combogrid.js`这个文件中,通常包含了...

    ExtJS 中文手册2

    通过上述介绍,我们可以看出 ExtJS 不仅功能强大,而且易于使用。无论是创建简单的表格,还是构建复杂的前端应用,ExtJS 都是一个非常优秀的选择。希望本文能够帮助开发者更好地理解和应用 ExtJS,从而提升开发效率...

Global site tag (gtag.js) - Google Analytics