javascript - Extjs 4 basic templating

Question

I want to make a custom component extending Ext.Panel, that component is based on an XTemplate and I want to substitute certain elements in an template with Ext.Element, but I cannot find any documentation on how you do that.

My example code is here, not working...

Ext.define('Ext.ux.PivotPanel', 
{
    alias: 'widget.pivotpanel',
    extend: 'Ext.Panel',
    html: ' ',
    bodyTpl: Ext.create('Ext.XTemplate',
        '<div class="x-pgrid">',
            '<div class="x-pgrid-viewport">',
                '<div class="x-pgrid-header-angle"></div>',
                '<div class="x-pgrid-header-top"></div>',
                '<div class="x-pgrid-header-left"></div>',
                '<div class="x-pgrid-body"></div>',
            '</div>',
        '</div>'
    ),
    onRender: function()
    {
        this.callParent(arguments);

        var me = this;          

        var panelEl = me.bodyTpl.overwrite(me.body, [], true);
        var bodyEl = new Ext.Element(panelEl.query('.x-pgrid-body'));

        var div = new Ext.Element(document.createElement('div'));
        div.update('test');
        div.appendTo(bodyEl);
        me.doComponentLayout();
    }
});

What I'm trying to do is put some content into x-grid-body div.