标签:style http color os io strong 文件 for ar
由于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 }
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片
标签:style http color os io strong 文件 for ar
原文地址:http://my.oschina.net/u/206098/blog/305450