How to create a URL column in a Sencha ExtJS grid panel

I don’t know if this is the best way to do this, but if you want a column in a Sencha ExtJS grid to display a URL field that the user can click, I can confirm that this code works:

{
    text: 'URL',
    width: 250,
    dataIndex: 'url',
    xtype: 'templatecolumn',
    tpl: '<a href="{url}" target="_blank">{url}</a>'
}

Just use this code to define one of your columns in your Ext.grid.Panel, and the user will be able to click on the field, and the URL will open in a new window/tab. The secret sauce in this recipe is to know about the Sencha templatecolumn xtype, and its corresponding tpl attribute.

My complete ExtJS grid panel

If it helps to see it all, my complete Sencha ExtJS grid panel source code looks like this:

Ext.define('Finance.view.ResearchLinksList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.researchLinksList',

    frame: true,
    store: Ext.create('Finance.store.ResearchLinks'),

    // valid column xtypes are:
    // none, 'numbercolumn', 'datecolumn'
    columns: [
        {
            text: 'ID',
            width: 30,
            dataIndex: 'id'
        },
        {
            text: 'Symbol',
            width: 60,
            dataIndex: 'symbol'
        },
        {
            text: 'URL',
            width: 250,
            dataIndex: 'url',
            xtype: 'templatecolumn',
            tpl: '<a href="{url}" target="_blank">{url}</a>'
        },
        {
            text: 'Date',
            width: 80,
            dataIndex: 'datetime',
            xtype: 'datecolumn',
            format: 'Y-m-d',
            align: 'right'
        },
        {
            text: 'Notes',
            width: 400,
            dataIndex: 'notes'
        }
    ],

    dockedItems: [
        {
            xtype: 'toolbar',
            flex: 1,
            dock: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Add',
                    itemId: 'add',
                    iconCls: 'add'
                },
                {
                    xtype: 'button',
                    text: 'Delete',
                    itemId: 'delete',
                    iconCls: 'delete'
                }
            ]
        }
    ]

});