Best approach to creating a custom ExtJS of pure HTML

Question

So I have a need to create an ExtJS component (version 2.3.0). The component is simply plain HTML (styled) - it is a heading.

My current approach is to create a custom component as follows:

/**
 * A ExtJS component for a header for the application
 */
Ext.ux.AppHeader = Ext.extend(Ext.Component, {

    height: 32,

    tpl: new Ext.Template ('<div class="title-bar"><h1>My App</h1></div>'),

    onRender: function(ct) {
        this.el  = this.tpl.append (ct);
        Ext.ux.AppHeader.superclass.onRender.apply(this, arguments);
    }
});

Ext.reg('AppHeader', Ext.ux.AppHeader);

This works fine, but I'm not convinced it is the "right" way to go about it. If anyone can share a more idiomatic way to do it, or a way that utilises some inner magic in ExtJS better, that would be great.

If on the other hand this is the "right" way to do it - let this be an example of how one can.

Edit

I was definitely trying to hard with this one. The approach I now take is:

{
  html: '<div class="title-bar"><h1>My App</h1></div>'
}

and define the 'title-bar' CSS to have the text the right style/size, and ExtJS does the right thing.

Answer 1

@bmoeskau answer is obviously correct (he cofounded ExtJS).

But I wanted to clarify about the OP's Edit, which is ok but it may confuse someone looking for a similar minimal rendering still using an Ext components. This is the code I'm talking about:

{ html: '<div class="title-bar"><h1>My App</h1></div>' }

The above code will create an entire Ext.Panel (because "panel" is the defaultType of every Ext.Container), and that is handy because panels have many features, but maybe you look at the code and you expect to get just the intended div, and not a bunch of nested divs which will contain your title-bar div. If that is the case you are probably looking for something similar to this:

{ xtype: 'box', autoEl: { tag: 'div', cls: 'title-bar', html: '<h1>My App</h1>' }}

And this will render just the div expected with your custom class and your html inside, but that div will also have the rest of ExtJS positioning and sizing information which will let you take advantage of Ext's layout system.