`

Ext 修改grid行或者列的背景颜色和字体颜色(来自网络)

ext 
阅读更多

原帖地址:http://hi.baidu.com/zkban/blog/item/8019380f83b345f9aa645770.html
Ext 修改grid行或者列的背景颜色和字体颜色
文章分类:Web前端
修改某一列的背景颜色和字体颜色
css代码

.x-grid-back-red {
    background: #FF0000;   //修改背景颜色
    color:#000000;  //修改字体颜色
}


JS代码

{
header : '分成类型',
dataIndex : 'divideType',
renderer : function(v,m){
  m.css='x-grid-back-red';
                return v;
},
width : 60
}


或者直接这样

{
header : '编号',
dataIndex : 'fcId',
css : 'background: #FF0000;color:#000000',
width : 40
}


修改某一行的背景颜色和字体颜色
css代码

.x-grid-record-red {
    background: #FF0000;   //修改背景颜色
    color:#000000;  //修改字体颜色
}


JS代码
直接在grid中设置viewConfig属性

viewConfig : {
forceFit :true,
getRowClass : function(record,rowIndex,rowParams,store){
  //禁用数据显示红色
  if(record.data.limitType=='1' && record.data.isLeaf=='N'){
   return 'x-grid-record-red';
  }else{
   return '';
  }
}
}


或者为grid添加load方法

grid.getStore().on('load',function(s,records){
          var girdcount=0;
          s.each(function(r){
              if(r.get('10')=='数据错误'){
                    grid.getView().getRow(girdcount).style.backgroundColor='#F7FE2E';
              }
              girdcount=girdcount+1;
          });
});
分享到:
评论

相关推荐

    修改grid行或列颜色

    除了修改行颜色外,还可以修改列的颜色。在这个例子中,使用了 `ColumnModel` 和自定义渲染器(`renderer`)来实现这一点。 ```javascript var cmParamGestionCouleur = new Ext.grid.ColumnModel([{ id: 'VALEUR_...

    EXT grid中根据每一行的状态列内容来让当前行显示不同的背景颜色

    在EXT Grid中,我们经常需要根据数据行的状态来定制显示效果,比如改变行的背景颜色,以便突出显示特定的信息或者引导用户关注关键数据。在本教程中,我们将深入探讨如何实现"EXT grid中根据每一行的状态列内容来让...

    Ext jsGrid 锁列问题

    用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助

    ext grid 根据条件指定行颜色

    ### ext grid 根据条件指定行颜色 在Ext JS框架中,`Ext.grid`是非常常用的一个组件,用于展示表格数据。对于数据展示来说,通过不同的样式来区分数据的状态是一种非常直观且有效的方法。例如,根据特定条件改变...

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

    css代码: 代码如下: .x-grid-back-red { background: #FF0000; } js代码: 代码如下: { header : ‘分成类型’, dataIndex : ‘divideType’, renderer : function(v,m){ m.css=’x-grid-back-red’; return v; }, ...

    ext grid 合并行

    1. **理解EXT Grid的结构**:EXT Grid由一系列的行(Row)和列(Column)组成,每一行包含多个单元格(Cell)。行合并涉及将多个行的单元格合并为一个大单元格。 2. **自定义Renderer**:首先,我们需要创建一个...

    ext grid 合计行

    找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...

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

    在实际应用中,我们可能需要根据数据的状态或者特定条件来改变某一列或某一行的背景颜色和字体颜色,以突出显示某些信息。下面将详细解释如何在EXTJS Grid中实现这一功能。 首先,我们要理解EXTJS Grid中的`...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    Ext修改GridPanel数据和字体颜色、css属性等

    本篇文章将深入探讨如何在Ext中修改GridPanel的数据、字体颜色以及应用CSS属性。 首先,修改GridPanel中的数据是通过数据存储(Store)来实现的。Store是GridPanel的数据源,它与服务器端进行交互,加载或更新数据...

    EXT2.0 GRID 示例

    3. **行编辑**:EXT GRID支持行内编辑,用户可以直接在表格中修改数据,这需要结合EditorGridPanel和Form Field组件来实现。 4. **排序和过滤**:GRID可以实现列点击排序,通过配置`sortable`属性和`sortInfo`对象...

    Ext框架的Grid使用介绍

    这篇"Ext框架的Grid使用介绍"将深入探讨Grid的使用方法和技巧。 Grid组件在EXT JS中扮演着数据表格的角色,可以展示多列数据,并且支持排序、分页、筛选、编辑等功能。它的灵活性在于能够根据需求定制各种复杂的...

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。

    Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...

    Ext4 grid打印

    Ext4 Grid提供了丰富的功能,包括数据排序、筛选、分页以及列的动态调整等。在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化地呈现到纸上,以便于用户进行查阅或存档。这通常涉及到打印预览,确保数据...

    jq-extgrid v1.2 表格插件

    http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过...extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列 [更多]

    JSP中使用EXT实现grid table

    5. 编辑功能:EXT Grid可以开启行内编辑或者弹出式编辑,方便用户直接在表格中修改数据。 6. Ajax集成:EXT Grid通过Ajax请求从服务器获取或提交数据,这使得页面能够在不刷新的情况下更新内容,提供了流畅的用户...

    ext grid 导出 excel

    5. **样式和格式处理**:EXT Grid中的数据显示有各种样式,如颜色、字体等。如果需要保留这些样式,可以使用XLSX.js的`cellStyles`选项。但是,这需要更复杂的处理,因为Excel的样式系统与EXT Grid的样式不完全相同...

    Ext自定义Grid Cell插件

    在Ext JS这个强大的JavaScript框架中,`Grid`是用于展示数据的一种常见组件,它提供了灵活的数据展示和操作功能。在实际开发中,我们有时需要在Grid的单元格(Cell)中添加更丰富的交互元素,例如输入框、下拉选择器...

    EXT-JS Grid 用法

    EXT-JS Grid的基本结构包含行、列和单元格,可以绑定到数据源,如JSON或XML文件,也可以通过Store组件动态加载数据。在EXT Designer中,设计Grid的过程通常包括以下几个步骤: 1. 创建新项目:首先,打开EXT ...

Global site tag (gtag.js) - Google Analytics