ExtJS4.1.1 设置表格背景颜色修改文本颜色在表格中插入图片

最新推荐文章于 2025-08-23 20:28:56 发布

转载最新推荐文章于 2025-08-23 20:28:56 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/206098/blog/305450

文章标签：

#python

本文介绍了如何使用ExtJS 4.1.1版本进行表格行背景颜色设置及列背景渲染的方法。通过定义不同的行样式，并在JavaScript文件中通过getRowClass方法来指定每行的样式，可以实现交替行颜色的效果。此外，还提供了一个用于列背景渲染的函数示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

由于ExtJS版本不断更新，各种渲染方式也随之有所改变，目前大部分书籍还是停留在3版本，对于ExtJS4.1.1版本的表格渲染，设置表格行背景颜色的方式如下：

首先，定义行的样式：

复制代码

1.yellow-row .x-grid-cell{
2  background-color:#FFFF00 !important;
3         }
4  .white-row .x-grid-cell{
5    background-color:#FFFFFF !important;
6         }
7  .blue-row .x-grid-cell{
8     background-color:#00AAFF !important;
9         }

复制代码

该样式定义应在引入js文件之前。
然后，在js文件中引用样式。下面文件中第12~28行是对样式的引用：

复制代码

1     var gridPanel = new Ext.grid.Panel({ 
2         title : '联系人', 
3         store : Ext.data.StoreManager.lookup('simpsonsStore'),
12         viewConfig : {
13             getRowClass: function(record, rowIndex, rowParams, store){
14                 var cls;
15                 switch(rowIndex % 2){
16                     case 1:
17                         cls = 'white-row';    
18                         break;
19                     case 0:
20                         cls =  'yellow-row';
21                         break;
22                 }
23                 if(record.get('name') == '张毛毛'){
24                     cls =  'blue-row';
25                 }
26                 return cls;
27             }
28         },
29         columns : [{
30                     text : '姓名',
31                     dataIndex : 'name',
32                     sortable : true,  //不可排序
33                     hideable: false   //不可隐藏
34                     //flex: 1   //尽量拉伸
35                 }, {
36                     text : '电话',
37                     dataIndex : 'phonenumber'
38                     //renderer : renderCol
39                     //flex : 1
40                     //hidden: true
41                 },{
42                     text: '性别',
43                     dataIndex: 'sex',
44                     renderer: function(value){
45                         if(value == '男'){
46                             return "<span style='color:blue;'>男</span><img src='../imgs/man.png' width='15'/>";
47                         }else{
48                             return "<span style='color:red;'>女</span><img src='../imgs/woman.png' width='15'/>";
49                         }
50                     }
51                 },{
52                     text: '出生日期',
53                     dataIndex: 'birthday',
54                     type: 'date',
55                     renderer: Ext.util.Format.dateRenderer('Y年m月d日')
56                 }],
57         height : 200,
58         width : 400,
59         renderTo : document.getElementById('grid'),
60         listeners: {
61             click: {
62                 element: 'el', //bind to the underlying el property on the panel
63                 fn: function(){
64                     var selections = gridPanel.getSelectionModel().getSelection();
65                     Ext.MessageBox.alert('aaaa',selections[0].get('name'));
66                 }
67             }
68         }
69     });

复制代码

上面文件中，第44~50行是给表格添加图片以及修改文本颜色。

上面对背景颜色的设置只是针对行的设置，下面是对列进行背景渲染的函数，在上面js代码中的38行中调用。

1     function renderCol(value, metaData, record, rowIndex, columnIndex, store, view ){
2         metaData.style = "background-color: #F5C0C0";
3         return value;
4     }

转载于:https://my.oschina.net/u/206098/blog/305450