Ext Window with custom template

Question

I'd like to create a popup window, that'll have some custom template. The basic functionality is to have some text in header, then form, progressbar and buttons. Problem is that my custom template is rendered at the very end and doesn't really fit in the popup. What is the proper approach for this ? Any examples available anywhere ? My shortened code :

Ext.define('MyTooltip', {
    extend : 'Ext.window.Window',
    title: 'Mywindow',
    closeAction: 'hide',
    width: 300,
    height: 300,
    layout: 'fit',
    resizable: false,
    draggable: true,
    modal: true,
    items: [],
    data: {
        bar: 'foo'
    },
    tpl : Ext.create('Ext.XTemplate', '<div class="tooltip"><h1>{bar}</h1><div>{form}</div></div>', {compiled: true}),

    initComponent: function(){
        var me = this;

        //Create items
        var progressBar = Ext.create('Ext.ProgressBar', {
            text: 'Progress...',
            width: 250,
            animate: true,
            hidden: true,
            id: 'widget-progressbar'
        });       

        me.items = [
            Ext.create('Ext.form.Panel',{
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                items: [                   
                    {
                        width:          50,
                        xtype:          'combo',
                        mode:           'local',
                        value:          'Audi',
                        triggerAction:  'all',
                        forceSelection: true,
                        editable:       false,
                        fieldLabel:     'Cars',
                        name:           'cars',
                        queryMode:      'local',
                        store:          ["Audi", "BMW", "Citroen"]
                    },
                    progressBar
                ],

                buttons: [
                    {
                        text: 'Start',
                        handler: function() {
                        },
                        scope: this
                    }
                ]
            })
        ]      

        me.callParent(arguments);      
    }
});

---

EDIT

Following first answer tried to change my initComponent method, but how can I get my items rendered into tpl, or html ?

initComponent: function(){
    (...)

    me.callParent(arguments);

    var tpl = Ext.create('Ext.XTemplate', 
        '<div>'+
            '<div><h3>Available cars</h3>'+
            '<div>{form}'+
            '</div>'+
        '</div>',
        {compiled: true}
    );

    this.html = tpl.apply({
        form: me.form.html
    });
},

Answer 1

I would not go with using custom tpl property. It all depends on how are you planning to use this base class. In my projects I put common logic inside initComponent() constructor - like creating same toolbar for all child views.