`
PrideSnow
  • 浏览: 242266 次
  • 性别: 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行或列颜色

    在本篇内容中,我们将详细探讨如何通过ExtJS框架来修改Grid中行或列的颜色,以便于实现更直观的数据展示效果。此方法适用于需要对数据进行视觉区分的应用场景,例如:高亮显示某些特定行或列,使得用户能够快速识别...

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

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

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

    综上所述,EXTJS Grid提供了丰富的灵活性来定制数据的显示,包括改变列和行的背景色及字体颜色。通过使用`renderer`函数和`getRowClass`方法,我们可以根据业务需求动态地调整Grid的视觉样式,提升用户体验。在实际...

    Ext的用户扩展控件-----可以在表格的单元格上弹出提示层信息

    例如,你可以根据单元格的数据内容动态生成提示信息,或者设置提示层的背景颜色、字体大小等视觉效果。这使得EXT Grid不仅可以作为数据展示的工具,还能为用户提供更多维度的信息,帮助他们更好地理解和分析数据。 ...

    Ext Js权威指南(.zip.001

    10.2.5 设置行的背景颜色 / 532 10.2.6 列标题的分组 / 533 10.2.7 使用锁定列 / 534 10.2.8 grid的配置项、属性、方法和事件 / 535 10.3 grid的附加功能 / 537 10.3.1 概述 / 537 10.3.2 附加功能基类:ext....

Global site tag (gtag.js) - Google Analytics