修改某一列的背景颜色和字体颜色
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;
});
});
分享到:
相关推荐
在本篇内容中,我们将详细探讨如何通过ExtJS框架来修改Grid中行或列的颜色,以便于实现更直观的数据展示效果。此方法适用于需要对数据进行视觉区分的应用场景,例如:高亮显示某些特定行或列,使得用户能够快速识别...
本篇文章将深入探讨如何在Ext中修改GridPanel的数据、字体颜色以及应用CSS属性。 首先,修改GridPanel中的数据是通过数据存储(Store)来实现的。Store是GridPanel的数据源,它与服务器端进行交互,加载或更新数据...
综上所述,EXTJS Grid提供了丰富的灵活性来定制数据的显示,包括改变列和行的背景色及字体颜色。通过使用`renderer`函数和`getRowClass`方法,我们可以根据业务需求动态地调整Grid的视觉样式,提升用户体验。在实际...
例如,你可以根据单元格的数据内容动态生成提示信息,或者设置提示层的背景颜色、字体大小等视觉效果。这使得EXT Grid不仅可以作为数据展示的工具,还能为用户提供更多维度的信息,帮助他们更好地理解和分析数据。 ...
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....