I'm encountering a small issue with my ExtJS 4.2 MVC application that involves grid and image transparency. Below is a snippet of my grid setup:
Ext.define('XProject.view.message.inbox.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.inboxgrid',
store: 'message.Inbox',
requires: [
'Ext.ux.grid.FiltersFeature' ,
'XMailweb.view.message.inbox.CtxMenu'
],
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if ((record.get('Flags') & 2 )== 0) {
return "boldFont";
}
if (record.get('Err_Id') != 0) {
return "redFont";
}
}
},
selType: 'checkboxmodel',
selModel: {
checkOnly: false,
injectCheckbox: 0
},
features : [{
ftype: 'filters',
autoReload: false,
encode:true,
paramPrefix : 'Filter'
}],
columns: [{
xtype: 'gridcolumn',
cls: 'attach',
width: 18,
dataIndex: 'Files_Num',
menuDisabled: true,
sortable:false,
text: 'Attachment',
renderer: function(value, metaData, record ){
if (value >= 1){
metaData.css = 'attach';
}
return '';
}
}]
})
Additional columns have been omitted. Here is the CSS rule I am using:
.attach {
background:transparent url('../icons/attach.png') no-repeat center left !important;
text-indent: -250px;
}
The attach.png image should be transparent, but when the grid is rendered with alternate row background colors, it appears with a white background. This is the transparent image I am using:
And this is how the grid appears after rendering:
Why do none of the images in the grid have a transparent background? I have tested on both Firefox and Internet Explorer, but the results are consistent. Any insights or suggestions would be appreciated.