首页 > 代码库 > ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片
由于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=http://www.mamicode.com/‘../imgs/man.png‘ width=‘15‘/>";>上面文件中,第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 设置表格背景颜色 修改文本颜色 在表格中插入图片
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。