由于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行是对样式的引用：
1var 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:17cls = 'white-row'; 18break;19 case 0:20cls = 'yellow-row';21break;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 : renderCol39 //flex : 140 //hidden: true41 },{42 text: '性别',43 dataIndex: 'sex',44 renderer: function(value){45if(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 panel63 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行中调用。
1function renderCol(value, metaData, record, rowIndex, columnIndex, store, view ){2 metaData.style = "background-color: #F5C0C0";3 return value;4}
