`
qinya06
  • 浏览: 597297 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs的grid控件如何根据值来设置某行的背景颜色

阅读更多
根据不同的值来设置grid的背景颜色

在viewConfig里面配置getRowClass就行了,例:
先自定义一个CSS:
<style type="text/css">
.my_row_Red table{ background:Red}
</style>
然后在GridPanel里这样写:
var QueryGrid=new Ext.grid.GridPanel({
            frame:true,
            renderTo:document.getElementById("QueryGrid"),
            enableColumnHide:false,
            columns:[
                {header:'姓名',sortable:true,dataIndex:'Name'},
                {header:'性别',dataIndex:'Sex'},
                {header:'年龄',dataIndex:'Age'}
            ],
            store:JQueryStore,
            loadMask: true,
            viewConfig:{forceFit:true,sortAscText:'正序',sortDescText:'降序',getRowClass : function(record,rowIndex,rowParams,store){ 
                            if(record.data.Sex=="1"){
                                return 'my_row_Red';
                            }                        }
            }
})
分享到:
评论

相关推荐

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

    ### Extjs4.2 根据不同的数值设置 TabPanel 行的背景颜色 #### 一、引言 在Web应用程序开发中,为了提高用户体验并使数据呈现更加直观易懂,开发者常常需要根据数据的不同状态来调整UI元素的样式。例如,在使用...

    修改grid行或列颜色

    1. **行颜色修改**:通过 `getRowClass` 方法可以根据行数据的属性来动态设置行的CSS类名,进而改变行的颜色。 2. **列颜色修改**:通过 `ColumnModel` 的 `renderer` 属性指定自定义渲染器,可以在单元格级别上设置...

    extjs grid数据导出excel文件

    在EXTJS中,Grid控件是用于展示大量结构化数据的关键组件,具有丰富的功能和高度可定制性。本文将深入讲解EXTJS Grid如何实现数据导出到Excel文件的功能。 首先,我们要明白EXTJS Grid的数据导出到Excel的过程通常...

    ExtJs DataGridView控件实例

    3. **菜单支持**:Grid可以集成上下文菜单,用户右键点击某行或单元格时,会出现一系列操作选项,如编辑、删除、复制等,增强了用户的交互性。 4. **排序功能**:Grid中的每一列都支持排序,用户可以通过点击列头来...

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

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

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

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

    ExtJS_grid.rar_Grid javascript_extjs grid

    这个"ExtJS_grid.rar"压缩包包含了关于学习ExtJS Grid的教程资源,特别是"第三节_ExtJS表格控件和树控件.pdf",它可能详细讲解了如何使用Grid以及与树形控件的结合。 1. **ExtJS Grid基本概念**: - **Grid Panel*...

    ExtJS下拉列表树控件

    这可以通过监听`beforeedit`事件来实现,根据业务逻辑判断是否允许编辑: ```javascript grid.on('beforeedit', function(editor, e) { if (满足条件) { e.cancel = true; // 取消编辑 } }); ``` 此外,我们...

    Extjs动态GRID

    EXTJS Grid的列宽度可以设置为自动或固定,也可以根据窗口大小或内容自动调整。使用`flex`属性,可以指定列的相对宽度,使得Grid在不同屏幕尺寸下保持良好的布局。 5. 表头菜单: EXTJS Grid支持自定义表头菜单,...

    extjs4 grid(含form)

    extjs4 grid 包括form js代码

    extjs 5 combogrid控件

    ExtJS 5 Combogrid 控件是Sencha公司开发的ExtJS框架中的一款高级组件,主要用于在表单中实现下拉列表与表格的结合,提供更丰富的数据展示和选择功能。Combogrid控件结合了combobox(下拉框)和grid(数据网格)的...

    ExtJS4.0 分享GridHeaderFilters插件

    ExtJS提供了API接口来编程式地控制过滤器,如`grid.filters.getFilter(id)`可以获取特定列的过滤器,`filter.enable()`或`filter.disable()`可以启用或禁用过滤器,`grid.filters.apply()`将所有过滤器的条件应用到...

    extjs C#控件全示例

    总的来说,"extjs C#控件全示例"是一个极好的资源,适合想要在C#环境下利用ExtJS进行Web开发的初学者和有一定经验的开发者。通过研究和实践这个示例集,不仅可以提升对ExtJS控件的理解,还能掌握C#与前端交互的技术...

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

    本文将深入探讨如何利用ExtJs的相关控件类来实现一个自定义的Grid列表导出功能,同时保持列表的样式。 首先,理解ExtJs Grid的基本结构至关重要。Grid是一个可配置的组件,用于显示数据集并提供交互式功能,如排序...

    Extjs4前台前台grid导出excel

    它提供了一套完整的组件模型,其中包括Grid(表格)控件,用于展示和操作数据。在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    - 配置Buffer Grid通常涉及到设置`buffered`属性为`true`,并可能需要调整`scrollDelta`属性来控制加载更多数据的触发点。 4. **Progress Grid** - 进度网格(Progress Grid)是在Grid的基础上增加了显示进度条...

    ExtJS 使用grid显示数据

    这篇博客文章 "ExtJS 使用grid显示数据" 可能详细阐述了如何利用ExtJS的Grid面板来展示和操作数据。 在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤...

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...

    Extjs4添加tooltip

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

Global site tag (gtag.js) - Google Analytics