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

This looks like some serious over-engineering. The purpose of making something a component is so that it's reusable in some fashion. Maybe if it had configs for the title, class, etc. I could see the point, but as it is, there's no reason (unless you have drastically over-simplified for the purpose of posting here?). Why not just put this div directly into the page code or Panel config or whatever is containing it?

FYI, visually-rendered components usually subclass BoxComponent since it provides sizing and layout capabilities in addition to the Component API. BoxComponents work much easier with the standard Ext layouts.