Поэтому мне нужно создать компонент ExtJS (версия 2.3.0). Компонент - это просто обычный HTML (стиль) - это заголовок.

Мой текущий подход заключается в создании пользовательского компонента следующим образом:

/**
 * 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);

Это прекрасно работает, но я не уверен, что это «правильный» способ сделать это. Если кто-то может поделиться более идиоматическим способом сделать это или способом, который использует некоторую внутреннюю магию в ExtJS лучше, это было бы здорово.

Если, с другой стороны, это «правильный» способ сделать это - пусть это будет примером того, как можно.

редактировать

Я определенно пытаюсь трудно с этим. Подход, который я сейчас использую:

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

и определите CSS 'title-bar', чтобы текст соответствовал нужному стилю / размеру, а ExtJS делает правильные вещи.