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

Поэтому мне нужно создать компонент 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 делает правильную вещь.


components extjs
person Jamie Love    schedule 15.12.2009    source источник

Ответы (2)


arrow_upward
6
arrow_downward

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

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

РЕДАКТИРОВАТЬ: обратите внимание, что в Ext 4 BoxComponent больше не существует. Теперь вы просто используете Component в качестве основы для большинства простых виджетов, подобных этому.

person Brian Moeskau    schedule 15.12.2009
comment
Согласованный. Тем более, что он не настраивается и не используется повторно; просто закодируйте его как div в разметке, а затем перетащите его в Ext.Panel, используя contentEl. - person Jonathan Julian; 15.12.2009
comment
Согласованный. кстати: можно подняться выше в иерархии классов, чтобы получить описанные вами преимущества; Контейнер — самый легкий класс, реализующий макеты. - person Upperstage; 15.12.2009
comment
Контейнер специально содержит другие компоненты и, таким образом, может управлять компоновкой своих дочерних компонентов. BoxComponent — это самый легкий класс, которым может управлять Контейнер и который может легко участвовать в макете (управлять его размером и положением). Все зависит от характера компонента, который вы создаете. - person Brian Moeskau; 16.12.2009
comment
Я полностью согласен. Узнав больше о подходе ExtJS, я пришел к такому же выводу. - person Jamie Love; 06.01.2010

arrow_upward
16
arrow_downward

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

Но я хотел уточнить о редактировании OP, что нормально, но это может сбить с толку тех, кто ищет аналогичный минимальный рендеринг, все еще использующий Компоненты 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.

person Mariano Desanze    schedule 02.11.2010