applying multiple css in grid cell

Hi,

I need to apply 2 css classes in my grid's column.

The first css('x-link') makes the text in the grid a hyperlink and the second sets the background and font color.

The color depends on the value but the hyperlink will always be there.

I tried the code below. Didn't work.

Code:

{
    header: "Artist Display Name",
    width: 140,
    dataIndex: 'ArtistDisplayName',
    sortable: true,
    renderer: function (value, metaData, record, rowIndex, colIndex, store) {


        metaData.css = 'x-link';


        if (value == '')
            return '<i>Add display name</i>';
        else {
            if (record.data.ArtistDisplayNameEdited)
                metaData.css += 'cell-green';
            else if (record.data.scrub)
                metaData.css += 'cell-blue';
            else
                metaData.css += 'cell-red';


            return value;
        }


    },
    align: 'left'
}

Please help.