3 Ways to render HTML inside of a ExtJS container

I thought of three different ways – let’s take a look at them:

Ext.onReady(function(){
 new Ext.Panel({
     renderTo: Ext.getBody(),
        title: '3 Ways to render HTML inside of a ExtJS container',
        items: [{
            html: "<a href='#'>1. HTML property of a panel</a>",
            xtype: "panel"
        }, {
            xtype: "panel",
            html: new Ext.XTemplate("<a href='#'>{value}").apply({
                value: '2. HTML property of a panel generated by an XTemplate'
            })
        }, {
            xtype: 'box',
            autoEl: {
                tag: 'a',
                html: '3. Dom element created by a DomHelper and wrapped as Component',
                href: '#'
            }
        }]
    });
});

It’s easy to think about the first one and you can find it quite often by googling around. Just setting the html property of a panel. The problem I am having with it is that the overhead of a panel is generated and the HTML is just static – I can’t generate similar values at runtime (e.g. a different link label in the example).
So apart from the second example that uses a template, I thought of the third solution that generates a DOM element at runtime using the DomHelper (theautoEl property calls this implicitly) and wraps it in a component. What do you think?