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.

EDIT: Note that in Ext 4, BoxComponent no longer exists. You'd now simply use Component as a base for most simple widgets like this.

Answer 2

@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.