`
PrideSnow
  • 浏览: 240892 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

Ext 修改grid行或者列的背景颜色和字体颜色

阅读更多

修改某一列的背景颜色和字体颜色
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 合并行

    在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid 合并行"就是关于如何在EXT Grid中实现行合并的技术点。 EXT Grid的行合并功能并不像列合并那样...

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

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

    ext grid 合计行

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

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

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

    EXT2.0 GRID 示例

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

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

    Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....

    Ext框架的Grid使用介绍

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

    jq-extgrid v1.2 表格插件

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

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

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

    JSP中使用EXT实现grid table

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

    Ext4 grid打印

    在这个场景下,"grid打印"指的是将Grid中的数据导出或者可视化地呈现到纸上,以便于用户进行查阅或存档。这通常涉及到打印预览,确保数据在打印时的布局和样式与在屏幕上显示的一致。 复杂表头打印是这个功能的一个...

    ext grid 导出 excel

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

    ext grid 显示数据

    10. **自定义行为和扩展**: EXT JS Grid允许开发者创建自定义的列类型、行模板、行选择模式等,满足个性化需求。通过继承和扩展EXT JS的API,开发者可以构建功能强大的数据视图。 通过阅读"5_使用Grids显示数据.doc...

    Ext自定义Grid Cell插件

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

Global site tag (gtag.js) - Google Analytics