Novice help displaying data as simple text

I've looked and looked, but can't see how to do this. It must be easy, but I can't see how:

I have a simple requirement to have a grid on the left which, when a row is clicked, a panel on the right displays various, changing pieces of information, formatted in HTML-type, rich formatting (different font sizes, types etc.).

The question is - what is the best way to realise the right-hand panel? I tried using HTML tags, but I can't get the right-hand panel to refresh/update.

I have added code to capture the selection change event in the left-hand grid and call a function that I want to use to update the details. The function is firing and the value changes, but nothing changes in the HTML that is displayed on screen.

Where am I going wrong with this approach, or is there a better approach?

Code:

var detailText = 'Plan Name';


function updateDetailsPanel() {
    detailsPanel.update();
}

var planList = Ext.create('Ext.grid.Panel', {
    store: 'planStore',
    columns: [{
        text: 'Name',
        dataIndex: 'Name',
        flex: 1
    }],
    listeners: {
        selectionchange: function (grid, selected, eOpts) {
            detailText = selected[0].get('Name');
            updateDetailsPanel();
        }
    }
});


var detailsPanel = Ext.create('Ext.panel.Panel', {    
    items: [{
        html: '<h1>' + detailText + '</h1>'
    }, {
        html: '<p>Created: 12th March 2014</p>'
    }]
});

This works fine on loading - the correct text (in this case "Plan Name") gets displayed in large, bold text in the right-hand panel. But when the function fires, and the contents of 'detailText' change (and they do - I checked with an alert), nothing changes in the HTML in the details panel.

I have tried various other methods on the right-hand Panel, including doLayout and updateLayout, but have had no success there either.

Help!!

Novice help displaying data as simple text