Grid column renderer issue

Hi;

I am using the following code in my column renderer function (this is a boolean column). The problem I have is that when the value of the column is TRUE all works well, however when the value is FALSE the image is not displayed? The console log is written as expected which makes me believe my JavaScript is correct, also by switching around the CSS values the image is rendered when value is true as expected, so I conclude no issues with my CSS.

I am a little confused and any pointers or suggestions would be welcomed.

thanks,

-Allen

Code:

                        {                            xtype: 'gridcolumn',
                            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                                if (value === true) {
                                    metaData.tdCls = 'vcardAddl';
                                    console.log('vcardAddl');
                                } else {
                                    metaData.tcCls = 'vcardDel';
                                    console.log('vcardDel');
                                }
                                return '';
                            },
                            width: 55,
                            align: 'center',
                            dataIndex: 'active',
                            hideable: false,
                            text: 'Active'
                        },

and my CSS

Code:

.vcardAddl {
    background: url(/wDesk/resources/images/btn/vcard-add.png) center no-repeat !important;
}
.vcardDel {
    background: url(/wDesk/resources/images/btn/vcard-delete.png) center no-repeat !important;
}

Grid column renderer issue