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

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

首先，定义行的样式：

.yellow-row .x-grid-cell{
background-color:#FFFF00 !important;
}
.white-row .x-grid-cell{
background-color:#FFFFFF !important;
}
.blue-row .x-grid-cell{
background-color:#00AAFF !important;
}

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

var gridPanel = new Ext.grid.Panel({
title : '联系人',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
viewConfig : {
getRowClass: function(record, rowIndex, rowParams, store){
var cls;
switch(rowIndex % 2){
case 1:
cls = 'white-row';
break;
case 0:
cls =  'yellow-row';
break;
}
if(record.get('name') == '张毛毛'){
cls =  'blue-row';
}
return cls;
}
},
columns : [{
text : '姓名',
dataIndex : 'name',
sortable : true,  //不可排序
hideable: false   //不可隐藏
//flex: 1   //尽量拉伸
}, {
text : '电话',
dataIndex : 'phonenumber'
//renderer : renderCol
//flex : 1
//hidden: true
},{
text: '性别',
dataIndex: 'sex',
renderer: function(value){
if(value == '男'){
return "<span style='color:blue;'>男</span><img src='../imgs/man.png' width='15'/>";
}else{
return "<span style='color:red;'>女</span><img src='../imgs/woman.png' width='15'/>";
}
}
},{
text: '出生日期',
dataIndex: 'birthday',
type: 'date',
renderer: Ext.util.Format.dateRenderer('Y年m月d日')
}],
height : 200,
width : 400,
renderTo : document.getElementById('grid'),
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){
var selections = gridPanel.getSelectionModel().getSelection();
Ext.MessageBox.alert('aaaa',selections[0].get('name'));
}
}
}
});

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

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

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