extjs renderer not executed

Question

Im using the modern toolkit with extjs 6.5.1. I want to use the renderer property in a grid cell to use html. The renderer simply returns '<a>...</a>' but when I use this it will encode the html code so that the cell shows '<a>...</a>' instead of a link. Regarding to the answers on this thread I will need a cell property with "encodeHtml" turned to false but as soon as I add a cell property the renderer wont get executed anymore (Even when I use EncodeHtml) and shows the data like there was no renderer property. Why cant I use the renderer property anymore?

Heres my code:

{
    xtype: 'gridcolumn',
    renderer: function(value, record, dataIndex, cell, column) {
        console.log('hello world');
        return '<a>...</a>';
    },
    width: 30,
    text: '...',
    cell: {
        xtype: 'textcell',
        encodeHtml: false
    }
}

What it looks like without encodeHtml

Answer 1

This behavior is because you specify

cell: {
    xtype: 'textcell'
}

in the first place. Just remove it, and your renderer can return HTML. This should work:

{
    xtype: 'gridcolumn',
    renderer: function(value, record, dataIndex, cell, column) {
        console.log('hello world');
        return '<a>...</a>';
    },
    width: 30,
    text: '...'
}

At least id does in my application, where I use renderers returning html to generate special formatting.

If you need to specify the cell property, because of something you didn't show in your code, use the default cell xtype instead: gridcell.