Лучший подход к созданию пользовательских ExtJS из чистого HTML

Question

Итак, мне нужно создать компонент 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 «заголовка», чтобы текст соответствовал нужному стилю / размеру, а ExtJS делает правильные вещи.

Answer 1

@ bmoeskau ответ , очевидно, правильно (он основал ExtJS).

Но я хотел бы уточнить про OP's Edit , что нормально, но это может сбить с толку тех, кто ищет подобный минимальный рендеринг, все еще используя компоненты Ext. Вот код, о котором я говорю:

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

Приведенный выше код создаст целый Ext.Panel (потому что "панель" - это defaultType каждого Ext.Container), и это удобно, потому что у панелей много функций, но, возможно, вы посмотрите на код и ожидаете чтобы получить только предполагаемый div, а не кучу вложенных div, которые будут содержать ваш заголовок div . Если это так, вы, вероятно, ищете что-то похожее на это:

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

И это будет отображать только ожидаемый div с вашим пользовательским классом и html внутри, но этот div также будет содержать остальную информацию о позиционировании и размерах ExtJS, что позволит вам воспользоваться преимуществами системы компоновки Ext.

Answer 2

Это похоже на серьезную чрезмерную инженерию. Цель сделать что-то компонентом состоит в том, чтобы его можно было использовать повторно. Может быть, если бы у него были конфиги для названия, класса и т. Д., Я мог бы понять смысл, но как такового, нет никакой причины (разве вы резко упростили для публикации здесь?) Почему бы просто не поместить этот div непосредственно в код страницы, в конфигурацию Panel или что-то, что его содержит?

К сведению, визуально визуализированные компоненты обычно являются подклассом BoxComponent, поскольку они предоставляют возможности определения размеров и компоновки в дополнение к API-интерфейсу компонента. BoxComponents работают намного проще со стандартными макетами Ext.

EDIT: обратите внимание, что в Ext 4 BoxComponent больше не существует. Теперь вы просто используете Компонент в качестве основы для большинства простых виджетов, подобных этой.