由于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://www.cnblogs.com/lihuiyy/archive/2012/09/26/2704329.html

總結

以上是生活随笔為你收集整理的ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。