`
duchq044
  • 浏览: 29181 次
  • 性别: Icon_minigender_1
  • 来自: 山东
社区版块
存档分类
最新评论

EXTJS修改行列的背景颜色

阅读更多
修改某一列的背景颜色和字体颜色
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修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

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

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

    EXTJS单元格变色、行变色

    5. 使用CSS来定义不同的背景颜色类,以便在EXTJS中应用。 结论 EXTJS提供了强大的grid功能,可以实现复杂的数据展示和编辑。通过使用renderer函数和getRowClass函数,我们可以轻松实现单元格变色和行变色,从而...

    EXTJS 行列转换

    EXTJS 行列转换是一种在前端使用EXTJS框架来实现数据展示的方式,它涉及到了动态Grid的构建,尤其是处理从数据库获取的结构化数据,并在前端以表格的形式进行展示。在EXTJS中,Grid组件是用于展示大量数据的常用工具...

    extjs之颜色选择器的使用

    在EXTJS 应用中,颜色选择器提供了用户友好的界面,使得用户能够方便地从预设的颜色列表中选取所需的颜色,或者输入自定义的颜色代码。 在EXTJS 中,ColorField 组件通常用于创建表单字段,允许用户选择颜色。它的...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    Extjs4 拾色器 颜色选择 ColorPicker

    在"Extjs4 拾色器 颜色选择 ColorPicker"的项目中,你可以通过简单地修改index文件中的ExtJS库引用路径,然后双击index.html来快速预览颜色选择器的效果。这表明该项目提供了一个快速启动的示例,让你能够轻松地了解...

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

    以下就是EXTJS Grid设置某列背景颜色和字体颜色的方法。 1. **设置列背景颜色**: 我们可以通过`renderer`函数来实现这一功能。`renderer`是一个在数据渲染到单元格之前被调用的回调函数,它允许我们对数据显示...

    图表颜色设置 extjs

    根据给定的信息,我们可以深入探讨如何在ExtJS中设置图表的颜色以及其他相关配置。ExtJS是一个用JavaScript编写的库,主要用于构建交互式的Web应用程序。它提供了丰富的UI组件、强大的数据处理功能以及灵活的主题...

    Extjs颜色选择器选择器

    在ExtJS中,颜色选择器(Color Picker)是一个常见的组件,用于让用户在多种颜色中选择一种。本实例中的"Extjs颜色选择器"提供了一个完整的实现,方便开发者直接在项目中使用。 在描述中提到的"ColorField.html"...

    extjs实例 入门,提供ext所需要的资源文件,详细叙述怎么改变文件颜色

    本实例将帮助初学者了解如何使用ExtJS入门,并通过提供的资源文件学习如何改变文件的颜色。 首先,我们要明白在ExtJS中改变文件颜色主要涉及到CSS样式和组件的配置。ExtJS的组件如按钮、表格、面板等都可以通过CSS...

    Extjs改变表格的颜色

    在EXTJS中,改变表格的颜色是一项常见的需求,用于提高数据可视化效果或突出显示特定的数据。在给定的信息中,我们看到两种方法来实现这个功能:一种是根据单元格的值来改变颜色,另一种是根据行的特定条件来改变...

    修改grid行或列颜色

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

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

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

    extjs最简单的数据绑定和修改

    在“extjs最简单的数据绑定和修改”这个主题中,我们将探讨如何在ExtJS中实现数据的双向绑定以及如何进行数据的修改。 1. 数据模型(Model): 在ExtJS中,数据模型定义了数据对象的结构和属性。创建一个模型类,...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid ...

    ExtJS颜色选择器(mordern版)

    总结起来,"ExtJS颜色选择器(modern版)"是ExtJS6.0+框架中针对现代设备优化的颜色选择组件,它提供了丰富的功能和高度的可定制性,帮助开发者在Web应用中轻松集成颜色选择功能。通过深入理解和灵活运用,开发者...

    extjs4.1修改bug版本

    extjs4.1修改bug版本,已修改数字、日期等多个控件的问题

    EXTJS 样式 修正 css 可以调整extjs里面的字体大小

    EXTJS 样式 extjs字体大小 可以轻松在这个CSS文件里面调整EXTJS插件的字体大小,对这个有需求的同志们有福了!

Global site tag (gtag.js) - Google Analytics