javascript - Extjs 4 基本模板

Question

我想制作一个扩展 Ext.Panel 的自定义组件，该组件基于 XTemplate，我想用 Ext.Element 替换模板中的某些元素，但我找不到任何关于如何做到这一点的文档。

我的示例代码在这里，不工作......

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();
    }
});

我想要做的是将一些内容放入 x-grid-body div。